【javascript】cookie和session

cookie

cookie的性质是绑定在特定域名下，当设定了一个cookie再向创建他的域名发送请求时都会包含这个cookie。使用key-value属性对的形式保存。

特性

1. 在不同域下和不同浏览器下cookie总数都是有限的

• IE7+ 每个域最多50个
• Firefox 每个域最多50个
• Opera 每个域最多30个
• Safari & Chrome 没有硬性要求

超出限制后再设置域名会删除之前设置的域名，IE和Opera会删除最近最少使用的cookie

2. cookie尺寸有限制

最好将整个cookie长度限制在 <= 4095B 的长度，因为大多数浏览器限制在4096 ± 1B

构成

• 名称：必须经URL编码
• 值：必须经URL编码
• 域：cookie对那个域是有效的
• 路径：对于指定域的那个路径，应该向服务器发送cookie
• 失效时间：默认浏览器会话结束删除所有cookie,若设置的失效时间在当前时间之前，则立即删除
• 安全标志：设置后只能通过SSL传输

栗子：

HTTP/1.1 200 OKContent-type: text/htmlSet-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; secureOther-header: other-header-value

使用

document.cookie = encodeURIComponent("myName") + "=" + encodeURIComponent("Doris");domain=.wrox.com; path=/";

读取，写入，删除

var CookieUtil = {// 读取get: function (name){    cookieStart = document.cookie.indexOf(cookieName),    cookieValue = null;    if (cookieStart > -1){        var cookieEnd = document.cookie.indexOf(";", cookieStart);        if (cookieEnd == -1){            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));            cookieEnd = document.cookie.length;        }    return cookieValue; 23    }},// 写入set: function (name, value, expires, path, domain, secure) {    var cookieText = encodeURIComponent(name) + "=" +                     encodeURIComponent(value);    if (expires instanceof Date) {        cookieText += "; expires=" + expires.toGMTString();    }    if (path) {        cookieText += "; path=" + path;    }         if (domain) {        cookieText += "; domain=" + domain;    }    if (secure) {        cookieText += "; secure";    }    document.cookie = cookieText;},// 删除unset: function (name, path, domain, secure){        this.set(name, "", new Date(0), path, domain, secure);    } };

Storage

sessionStorage和localStorage的区别是sessionStorage存储用于某个对话特定的数据直至会话结束，而localStorage是可以一直存在的。
sessionStorage是Storage对象的实例

使用

// 写入sessionStorage.setItem("name", "Nicholas");sessionStorage.book = "Professional JavaScript";// 读取var name = sessionStorage.getItem("name");var book = sessionStorage.book;// 循环for (var key in sessionStorage){    var value = sessionStorage.getItem(key);    alert(key + "=" + value);}// 删除delete sessionStorage.name;sessionStorage.removeItem("book");

localStorage

如果要跨越会话存储数据，使用localStorage。

• localStorage不能制定任何访问规则，
• localStorage相当于globalStorage[location.host]
• 数据保存至javascript删除，或清除浏览器缓存
• localStorage是Storage对象的实例

使用

// 写入localStorage.setItem("name", "Nicholas");localStorage.book = "Professional JavaScript";// 读取var name = localStorage.getItem("name");var book = localStorage.book;

Storage事件

监听Storage事件

EventUtil.addHandler(document, "storage", function(event){    alert("Storage changed for " + event.domain);});

event属性：

• domain 发生变化的存储空间的域名
• key 设置/删除的键名
• newValue 设置的新值，删除为null
• oldValue 键之前的值