【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 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; secure
Other-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 键之前的值