瀏覽器緩存介紹之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。