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

 更新时间:2014年04月17日 15:36:24   作者:   我要评论

cookie是有有效期的,cookie的默认有效期是从cookie生成至浏览器关闭,也可以通过设置cookie的有效期来指定其失效日期;用户也可以禁止cookie也可以手动删除cookie

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 return返回多个值,通过对象的属性访问方法

    js return返回多个值,通过对象的属性访问方法

    下面小编就为大家带来一篇js return返回多个值,通过对象的属性访问方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • springMVC结合AjaxForm上传文件

    springMVC结合AjaxForm上传文件

    这篇文章主要为大家详细介绍了springMVC结合AjaxForm上传文件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 一个网页标题title的闪动提示效果实现思路

    一个网页标题title的闪动提示效果实现思路

    通过网页title来提示用户有新消息这个功能很常见,下面有个不错的示例,大家可以参考下
    2014-03-03
  • JS仿万科底部的新闻滑动特效代码

    JS仿万科底部的新闻滑动特效代码

    本文通过一段实例代码给大家介绍了JS仿万科底部的新闻滑动特效代码,需要的朋友参考下
    2017-09-09
  • JavaScript学习笔记之惰性函数示例详解

    JavaScript学习笔记之惰性函数示例详解

    函数是js世界的一等公民,js的动态性、易变性在函数的应用上,体现的淋漓尽致。下面这篇文章主要给大家介绍了关于JavaScript学习笔记之惰性函数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-08-08
  • 利用transition实现文字上下抖动的效果

    利用transition实现文字上下抖动的效果

    这篇文章主要给大家介绍了利用transition属性如何实现文字上下抖动的效果,文中给出了详细的介绍和完整的实例代码,相信对大家的学习具有一定的参考借鉴价值,有需要的朋友们下面来一起看看吧。
    2017-01-01
  • JavaScript中的事件委托及好处

    JavaScript中的事件委托及好处

    事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件,本文给大家重点介绍js中的事件委托及好处,一起看看吧
    2016-07-07
  • JS组件Bootstrap按钮组与下拉按钮详解

    JS组件Bootstrap按钮组与下拉按钮详解

    这篇文章主要为大家介绍了JS组件Bootstrap按钮组与下拉按钮的相关资料,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Bootstrap布局之栅格系统详解

    Bootstrap布局之栅格系统详解

    这篇文章主要为大家详细介绍了Bootstrap布局之栅格系统,小编对Bootstrap栅格系统(布局)也很陌生,特分享整理这篇文章,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • javascript加号"+"的二义性说明

    javascript加号"+"的二义性说明

    单个的加号作为运算符在 JavaScript 中有三种作用。
    2013-03-03

最新评论