JavaScript欲速则不达—Cookie

Cookie是先如今客户端存数数据最主要的手段,跟HTML5中的localStorage和Web Sql主要区别就是:localStorage和Web Sqls是将数据保存在客户端,不跟服务端交互;而Cookie是页面跟服务器端互相传递信息。

由于Cookie的诸多限制,平时自己对cookie的使用也不是很多,前几天做项目用到,所以整理下,以免以后又忘记。

Cookie的组成

首先我们得清楚浏览器保存的 cookie 是字符串。typeof window.document.cookie //string

  • 名称:唯一确定cookie的名称。
  • :存储在cookie的字符串值。
    window.document.cookie="name=guwei";
    window.document.cookie="a=1; s=2; d=3;"; // 只有 a = 1 会被写入
    			

    为什么会这样?

    因为js引擎把s=2; d=3; 当作后续参数,只有 a = 1 会被写入。也正因为此,名称/值不允许分号(;)、逗号(,)、等号(=)以及空格,而且必须将名/值经过URI编码处理再操作cookie,。

  • :由于浏览器的安全机制,window.document.cookie可以设置该域下的cookie信息但是不能设置该子域下的cookie信息;而该子域下的网站可以设置父域的cookie,但是不能设置同级的其他子域的cookie。

    ps:www.html5jscss.com 是html5jscss.com(一级域名)的二级域名

  • 路径:指定域中的路径,路径的操作原则不同于域。同域名下可以操作所有目录,但是最好不要乱设,不然会出意想不到的事情。
    window.document.cookie="name=guwei; domain=.html5jscss.com; path=/";// demo.html5jscss.com 下操作
    alert(window.document.cookie) // 则在 html5jscss 域名所有文件下都已共享。
    			

    假如不设path值,默认是当前文件夹。相当于 path=window.location.path

  • 失效时间:表示cookie何时删除的时间戳。这个值是GMT格式的日期。
  • 安全标志:制定后,cookie只有在使用SSL链接的时候才发送到服务器。如设置,则只能发送给https://开头的地址。

cookie有以上组成,如果你就只设了名和值,如window.document.cookie = 'name=guwei',则域、路径、时效都是默认值。Domain的默认值是当前域名,Path的默认值是当前页面路径,Expires的默认值是Session,也就是浏览器关闭后自动释放。

由于cookie有数量和尺寸的限制,超出了这个限制之后,浏览器会删除之前设置的某些cookie,给新来的cookie腾出空间。所以,一个站点的cookie要好好管理。

子 Cookie 是解决限制cookie条数的一个办法。如下

		name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5
	

如果要操作子Cookie,则得转换成数组,用数组的方法操作,完成后再次拼接,最后再进行cookie操作。

cookie的操作

通过window.document.cookie="name=guwei";就可以设置cookie,而基本的cookie操作有三种:读取、写入和删除。封装如下:

  • 使用encodeURIcomponent()URI处理,使用decodeURIcomponent()解码处理。
  • 使用格林威治时间(GMT时间)来解决时间地域性的问题
  • 没有删除方法吗,可以将expires设置为过去时作为删除。

操作cookie函数库如下:

var cookie = {
	/**
	 * [获取置顶名称的cookie值]
	 * @param  {[String]} name [cookie键名]
	 * @return {[type]}      [cookie键值]
	 */
	get : function(name){
		var r = new RegExp("(?:^|;{1}|\\s{1})" +  encodeURIComponent(name) + "=([^;]*)");
		var m = window.document.cookie.match(r);
		return (!m ? '' : decodeURIComponent(m[1]) );
	},
	/**
	 * [设置一个cookie]
	 * @param {[String]} name   [cookie键名]
	 * @param {[String]} value  [cookie键值]
	 * @param {[String]} domain [设置所在域名]
	 * @param {[String]} path   [设置所在路径]
	 * @param {[Number]} hour   [存活时间,单位:小时]
	 * @return {Boolean} 是否成功
	 */
	set : function(name, value, domain, path, hour){
		if ( hour ) {
			var now = new Date();
			var expire = new Date();
			expire.setTime(now.getTime() + 3600000 * hour);
		}
		window.document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value) + '; ' + (hour ? ('expires=' + expire.toGMTString() + '; ') : '') + (path ? ('path=' + path + '; ') : 'path/; ') + (domain ?('domain=' + domain + ';') : ('domain=' + window.location.host + ';'));
		return true;
	},
	remove : function(name, domain, path){
		window.document.cookie = encodeURIComponent(name) +'=; expires=Mon, 04 Aug 1989 18:00:00 GMT; ' + (path ? ('path=' + path + '; ') : 'path/; ') + (domain ?('domain=' + domain + ';') : ('domain=' + window.location.host + ';'));
	}
}
		

本文源链接:http://www.html5jscss.com/javascript-cookie.html

转载请注明《JavaScript欲速则不达—Cookie》| html5jscss

评论关闭了.