js中的cookie的读写操作示例详解

所属分类: 网络编程 / JavaScript 阅读数: 1698
收藏 0 赞 0 分享

cookie是一小段信息,以键/值对的信息保存在计算机硬盘上的字符串, cookie存储容量大概在4kb,不同的浏览器厂家对cookie大小的限制有微微的差异;cookie主要的本质是“识别”,通过识别来做一些事情;cookie 也是无法从你的硬盘取得任何其它数据,传送电脑病毒或者获取你的电子邮件地址。cookie是有有效期的,cookie的默认有效期是从cookie生成至浏览器关闭,也可以通过设置cookie的有效期来指定其失效日期;用户也可以禁止cookie也可以手动删除cookie。

cookie是字符串而且还是一个特定格式的文本字符串

格式:cookieName=cookieValue;expires=expiresDate;path=URLpath;domain=siteDomain//cookie名称,失效日期,储存URL,储存域值;

cookie的创建方式

设置cookie我们一般都封装成一个函数:

复制代码 代码如下:

function addCookie(sName,sValue,day) {
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()+day);;
//设置失效时间
document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString();6 //escape()汉字转成unicode编码,toGMTString() 把日期对象转成字符串
}

读取cookie

添加了cookie之后,我们如何来获取它呢,很简单:
复制代码 代码如下:

function getCookies() {
var showAllCookie = '';
if(!document.cookie == ''){
var arrCookie = document.cookie.split('; ');
//用spilt('; ')切割所有cookie保存在数组arrCookie中
var arrLength = arrCookie.length;
for(var i=0; i<arrLength; i++) {
showAllCookie += 'c_name:' + unescape(arrCookie[i].split('=')[0]) + 'c_value:' + unescape(arrCookie[i].split('=')[1]) + '<br>' 9 }
return showAllCookie;
}
}

cookie有有效期可自动删除,也可以通过设置其失效日期来立即删除

一样很简单,继续:
复制代码 代码如下:

function removeCookie() {
if(document.cookie != '' && confirm('你想清理所有cookie吗?')) {
var arrCookie = document.cookie.split('; ');
var arrLength = arrCookie.length;
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()-1);
for(var i=0; i<arrLength; i++) {
var str = arrCookie[i].split('=')[0];
document.cookie = str+ '=' + ';expires=' + expireDate.toGMTString();
}
}
}

我们已经知道如何创建、获取、删除cookie了,现在也该运用cookie了

下面我们用cookie做一个简单的计时器:
复制代码 代码如下:

var cookieCount = {};
cookieCount.count = function () {
var count = parseInt(this.getCount('myCount'));
count++;
document.cookie = 'myCount=' + count + '';
alert('第'+count+'访问');
}
cookieCount.setCount= function () {
//首先得创建一个名为myCount的cookie
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()+1);
document.cookie = 'myCount=' + '0' +';expires=' + expireDate.toGMTString();
}
cookieCount.getCount = function (countName) {
//获取名为计数cookie,为其加1
var arrCookie = document.cookie.split('; ');
var arrLength = arrCookie.length;
var ini = true;
for(var i=0; i<arrLength; i++) {
if(countName == arrCookie[i].split('=')[0]){
return parseInt(arrCookie[i].split('=')[1]);
break;
}else{
ini = false;
}
}
if(ini == false)this.setCount();
return 0;
}
cookieCount.count();

cookie的路径

本文开头的时候提到cookie的路径设置 cookie的路径:path=URL;

如果在域名的子目录创建的cookie,域名及其他同级目录或上级目录是访问不到这个cookie的,而通过设置路径的好处就是可以上域名以及域名的子类目录都可以访问到,如下:

document.cookie='cookieName=cookieValue;expires=expireDate;path=/'。

cookie域

设置域:domain=siteDomain

这个主要用在同域的情况下共享一个cookie,例如 "www.taobao.com" 与 "ued.taobao.com" 两者是共享一个域名"taobao.com",我们如果想让 "www.taobao.com" 下的cookie被 "ued.taobao.com" 访问,那么就需要把path属性设置为 "/",并且设置 cookie 的domain-->document.cookie='cookieName=cookieValue;expires=expireDate;path=/;domain=taobao.com'。

随着web的不断发展项目中的需要,HTML5提供了两个属性window.sessionStorage和window.localStorage,并携带了setItem,getItem,removeItem,clear等方法,使得本地存储数据的方法操作更为简单便利

更多精彩内容其他人还在看

JS组件Bootstrap Table使用方法详解

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript禁止超链接跳转的方法

这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现的MD5算法完整实例

这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Hammer.js+轮播原理实现简洁的滑屏功能

这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

基于JQuery实现图片轮播效果(焦点图)

这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果,利用Jquery制作焦点图左右轮播特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现瀑布流加载图片原理

这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现的SHA-1加密算法完整实例

这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript实现的SHA-256加密算法完整实例

这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现图片层叠轮播切换效果

这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript自动切换焦点控制效果完整实例

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多