客户端存储之cookie

2019-06-1662次阅读javascript

cookie是存储于访问者计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie。你可以使用JavaScript来创建和取回cookie的值。

 

获取Cookie

document.cookie//读取所有可从此位置访问的Cookie

在上图中,可以看出返回值为一个字符串,该字符串包含所有的Cookie,每条cookie以分号分隔(即, key=value 键值对)。

 

设置Cookie

document.cookie = <cookie-list>;

<cookie-list>

一个或多个的名称/值对,形式为 <cookie-name>=<cookie-value>。名称/值对之间用分号和空格 ('; ')隔开。

document.cookie =  name=value; 
document.cookie =  name=value; name2=value2; name3=value3

以下可选的cookie属性值可以跟在键值对后,用来具体化对cookie的设定或更新,使用分号以作分隔:

  • ;path=path (例如 '/', '/mydir') 如果没有定义,默认为当前文档位置的路径。

  • ;domain=domain (例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。

  • ;max-age=max-age-in-seconds (例如一年为60*60*24*365)

  • ;expires=date-in-GMTString-format 如果没有定义,cookie会在对话结束时过期

  • 这个值的格式参见Date.toUTCString() 

  • ;secure (cookie只通过https协议传输)

注意

  • 当cookie中包含有等号、空格、分号等特殊字符时,可能会导致数据丢失、或者不能解析的错误,一个较好的解决办法就是:在将cookie值写入客户端浏览器之前,首先进行encodeURIComponent()编码,读取cookie时,进行decodeURIComponent()解码即可。

  • 可以通过更新一个cookie的过期时间为0来删除一个cookie

  • 更多/更大的cookies意味着每个请求都要包含更繁重的数据传输影响响应速度.如果您只是需要存储些客户端的数据, 那么建议您使用本地存储之Window.localStorage

 

简单的cookie代码

var SiteCookie = {
  _expires:30*24*3600*1000,//过期时间
  _domain:location.host,//例如 'example.com', '.example.com' (包括所有子域名)
  set:function(name,value,expires,path,domain){
    expires = new Date( new Date().getTime() + ( expires||this._expires ) );
    document.cookie = name + "=" + encodeURIComponent(value) +"; expires="+ expires.toGMTString() +"; path="+(path||"/")+"; domain="+(domain||this._domain);
  },
  get:function(name){
    var arr = document.cookie.match( new RegExp("(^| )"+ name +"=([^;]*)(;|$)") );
    if(arr != null) return decodeURIComponent( arr[2] );
    return null;
  },
  clear:function(name,path,domain){
    if( this.get(name) ) document.cookie = name +"=; path="+ (path||"/") +"; domain="+ (domain||this._domain) +"; expires=0";
  }
};

 

存储简单值

SiteCookie.set('tabState',1);//设置Cookie
SiteCookie.get('tabState');//获取Cookie值为1
SiteCookie.clear('tabState');//删除Cookie

 

存储数组对象

Cookie只能存储字符串的数据,但我们可以通过JSON对象提供的stringify将其他数据类型转化成字符串,再存储到Cookie中。取出时再通过JSON对象提供的parse方法解析JSON字符串,返回由字符串描述的JavaScript值或对象

var ary = [{age:30,name:'jin'},{age:27,name:'ren'}];

SiteCookie.set('user', JSON.stringify(ary) );//"[{"age":30,"name":"jin"},{"age":27,"name":"ren"}]"

console.log(  JSON.parse(  SiteCookie.get('user') ) );//[{age:30,name:'jin'},{age:27,name:'ren'}]
上一篇: 本地存储之Window.localStorage  下一篇: apply、call用法与区别  

客户端存储之cookie相关文章