浏览器缓存介绍之sessionStorage、localStorage、Cookie

Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实很是小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登陆信息，好比你登陆某个网站市场能够看到“记住密码”，这一般就是经过在 Cookie 中存入一段辨别用户身份的数据来实现的。

 

sessionStorage

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

 

localStorage

而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

 

三者的异同

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，不然永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	通常为5MB	通常为5MB
与服务器端通讯	每次都会携带在HTTP头中，若是使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通讯	仅在客户端（即浏览器）中保存，不参与和服务器的通讯
易用性	须要程序员本身封装，源生的Cookie接口不友好	源生接口能够接受，亦可再次封装来对Object和Array有更好的支持	源生接口能够接受，亦可再次封装来对Object和Array有更好的支持

 

localStorage使用代码以下:

//设置缓存,获取设置的缓存，键值对形式, name value

localStorage.getItem("key"); //获取键的值

localStorage.setItem("key", 1); //设置键的值

 

数据存储异常处理

try{
　　localStorage.setItem(key,value);
}catch(oException){
　　if(oException.name == 'QuotaExceededError'){
　　　　console.log('超出本地存储限额！');
　　　　//若是历史信息不重要了，可清空后再设置
　　　　localStorage.clear();
　　　　localStorage.setItem(key,value);
　　}
}

 

localStorage+cookie方案

/**
 * 浏览器端缓存使用1.默认使用localStorage 2.不支持localStorage时，使用cookie
 * @type {{isLocalStorage: _history.isLocalStorage, set: _history.set, read: _history.read, del: _history.del}}
 * @private
 */
_history={
    isLocalStorage:function(){
        return window.localStorage?true:false;
    },
    set:function(key,value){ //设置缓存
        if(this.isLocalStorage){
            window.localStorage.setItem(key,value);
        }else{
            var expireDays = 365; //失效时间
            var exDate=new Date();
            exDate.setTime(exDate.getTime()+expireDays*24*60*60*1000);
            document.cookie=key + "=" + escape(value)+";expires=" + exDate.toGMTString();
        }
    },
    read : function(key){ //读取缓存
        if(this.isLocalStorage){
            return window.localStorage.getItem(key);
        }else{
            var arr,reg=new RegExp("(^| )"+key+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg)){
                return unescape(arr[2]);
            }else{
                return null;
            }
        }
    },
    del : function(key){ //删除缓存
        if(this.isLocalStorage){
            localStorage.removeItem(key);
        }else{
            var exDate = new Date();
            exDate.setTime(exDate.getTime() - 1);
            var read_val=this.read(key);
            if(read_val!=null) document.cookie= key + "="+read_val+";expires="+exDate.toGMTString();
        }
    }
};

 

其它说明：

1.浏览器支持状况及使用时注意5M限制

 

"QUOTA_EXCEEDED_ERR”"是一个异常，若是你使用的存储容量超过了限度（5M）就会报这个异常

2.遍历localStorage存储的key

.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);

3.localStorage对象的属性值只能是字符串。

存储JSON格式数据

JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象

备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。