浏览器缓存介绍之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。