几种浏览器本地存储方案的比较

 一、Cookie存储
Cookie是目前流行也相当常用的本地存储方案。

优点：
不用安装什么插件，几乎各浏览器都支持，存取操作方便，
对js来说，只用一个document.cookie就够，至于怎么存取，这里就不说了。


缺点：
1）存储空间小，每个域名存储cookie的数量有限。
Cookie支持的存储空间一般为4k左右，在不同的浏览器下，每个域名能存储的cookie数量也是不同的。
IE以前是每域名20个限制，现IE7/8都提高到50个了，Firefox每域名50个，Opera是每域名30个，
Safari/WebKit貌似没有数量限制，有人测试过在safari3.1中每个域名能支持10000个cookie。

2）cookie过大，会导致错误。
cookie过大过多，则会使 header 大小超过服务器的处理的限制，导致错误发生。
对IE来说，如果一个cookie超过4096 bytes，用document.cookie来取值的话，将返回空字符串。
对于任何Set-Cookie header来说，如果header的长度超过5118 bytes，也会被忽略。
前段时间头像站点设置了一个预览记录的cookie，设置在qq.com域下，使得自动化测试发送的header过大，
请求串被截掉，请求失败，导致业务告警。


3）对网站流量的影响。
Cookie也会影响服务器的网络吞吐量。从httpwatch截图可以看出，没有本地Cache的情况下，
用户的每次请求都会产生cookie的上行流量。假如设置的cookie为1k，100个请求就会产生100k
cookie带来的上行流量。长期这样，对带宽的损耗是挺吓人的。

 清除掉部分cookie后，发送的流量少了不少。 

 4）命名冲突，不方便管理。
对于大型网站来说，各个业务都在公共域下设置cookie，也可能会导致cookie命名冲突，带来不便。
比如face.qq.com设置了一个cookie，命名为facename，域是.qq.com，imgcache.qq.com也设置了同样
名字同样域的cookie，这时就会冲突了。 

 二、userData Behavior/sessionStorage
userData适用于IE5.0+，sessionStorage适用于firefox2.0+，HTML5标准中也支持sessionStorage了。
从上面对cookie的了解我们知道，cookie有好多方面的不足，userData和sessionStotage从某些方面弥补了cookie的不足。
它们可以存储更多的数据，客户端的每次请求也不会将数据带给server。


下面介绍先介绍一下userData。
1）userData
userData可以在同目录同协议下相互访问，除非人为删除或者用脚本设置该数据的失效日期，否则数据长期存储在客户机器上。
UserData的支持的存储大小，比cookie大多了，下面是各个安全域支持的存储大小。
不爽的是，userdata基于安全的考虑，不支持跨域存取。比如face.qq.com设置的值，在imgcache.qq.com是访问不到的。

 关于userData详细的介绍可以参考一下MSDN文档说明：
http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx

2）sessionStorage
sessionStorage目前是基于Mozilla系列浏览器，从Firefox2.0开始支持。
Sessionstorage提供了一种在页面会话有效期内，简洁持久保存临时数据的能力。

存储空间大小默认为一个域名5M，还有SessionStorage支持跨域，只要页面没有被关闭，会话还有效，都能访问到数据。
这点比userData好点，但是相比之下userdata对数据的持久保存能力更强悍些，页面关闭再打开，还是能访问到。

 最后说一下userData Behavior / sessionStorage的优缺点：


优点：
存储空间更大，不会给网站流量带来负担。

缺点：
缺乏统一标准，userdata只能在IE5.0+中使用，sessionStorage目前是firefox2.0+中使用，
或者在HTML5中作为DOM的一个attribute使用，对于其他浏览器，比如safari则可以通过Database Storage来存储，
Opera可以通过widgets来实现，用的是文本数据库sqlite。...

下面是我对userdata/sessionStotage操作的简单封装，只是个demo，程序写的不够严谨，没有对IE、FF的版本判断。

var localData = {
    _oIe : null,
    _areaIe : "defaultSaveArea",
    _expires : 365,
    _isFF : !!(/firefox/i.test(navigator.userAgent)),
    _isIE : !!(/msie/i.test(navigator.userAgent)),
    _empty: function(v){ return (typeof(v)=='undefined'||v==null||v=='');},
    init : function () { 
        if( this._isIE && !this._oIe ){
            this._oIe = document.documentElement;
            this._oIe.addBehavior("#default#userdata");
        }
    },
    save : function (key, value, time, domain, path){
        this.init();
        if( this._empty(key) ){ return false; }
        if(this._isFF && sessionStorage){ 
            sessionStorage.setItem(key,value);
        }else if(this._isIE){
            var oTimeNow = new Date();
            oTimeNow.setMinutes(oTimeNow.getMinutes() + this._expires*24*60);
            var sExpirationDate = oTimeNow.toUTCString();
            this._oIe.expires = sExpirationDate;
            this._oIe.setAttribute(key,value);
            this._oIe.save(this._areaIe);
        }else{
            setCookie(key, value, time, domain, path);
        }
    },
    get : function (key){
        this.init();
        if( this._empty(key) ){ return false; }
        if(this._isFF  && sessionStorage ){ 
            var o = sessionStorage.getItem(key);
            return o ? o.value : "";
        }else if(this._isIE){
            this._oIe.load(this._areaIe);
            return this._oIe.getAttribute(key);
        }else{
            return getCookie(key);
        }
    },
    del : function (key, domain, path){
        this.init();
        if( this._empty(key) ){ return false; }
        if(this._isFF && sessionStorage ){ 
            sessionStorage.removeItem(key);
        }else if(this._isIE){
            this._oIe.setAttribute(key,"");
            this._oIe.save(this._areaIe);
        }else{
            delCookie(key, domain, path);
        }
    }
};