Web客戶端的幾種存儲方式

1、Cookie

 在H5之前，cookie是主要的存儲方式。cookie可以兼容到包括ie6以上的所有瀏覽器。

Cookie數據會帶到請求頭的cookie字段里面，每次同主域名的請求中，都會傳遞數據，增加了網絡請求的數據量，並且造成主域的污染。同時，cookie在不同瀏覽器上數量和大小都有限制

下面是各瀏覽器對cookie大小和個數的限制：

cookie的操作比較麻煩，需要自己寫操作函數來實現操作，下面是cookie是實現cookie的操作函數 

var cookie = {
        /**設置cookie 
         ** name 標識
         ** value 值
         ** options {
         **   'path': '訪問路徑',
         **   'domain' : '域名',
         **   'expire' : 過期時間
         }
         **/
        setCookie : function(name,value,options){
          var options = options ? options : {},
              path = options.path ? options.path : '/',
              domain = options.domain ? options.domain : document.domain,
              time = options.expire ? (new Date().getTime() + options.expire * 1000) : '',
              expire = new Date(time).toUTCString();
          document.cookie = encodeURIComponent(name) + "="+ encodeURIComponent(value) + ";expires=" + expire + 
                            ";domain=" + domain + ";path=" + path;
        },
        //獲取cookie
        getCookie: function(name){
          var arr,
              reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
          if(arr=document.cookie.match(reg)){
             console.log(arr);
             return unescape(arr[2]);
          }
          return null;
          
        },
        //移除cookie
        removeCookie: function(name){
          var val = this.getCookie(name);
          if(val != null){
            this.setCookie(name,val, {
              expire : - 1
            })
          }
        }
      }

Cookie的生命周期是根據設置值得expire的時間來控制的。

適用范圍

需要前后端進行傳遞的數據（比如用戶的登錄狀態）

低版本的瀏覽器兼容

2、sessionStorage和localStorage

 sessionStorage和localStorage是html5新引進的新特性。現在瀏覽器的支持情況：

localStorage是存儲在用戶本地的瀏覽器上，不像cookie一樣攜帶在http請求頭部的字段里面，這有效的節約了帶寬。localStorge同樣也采用了同源策略對存儲的容量進行了限制，一般限制為同一域名5M，並且不同域名的數據不能相互訪問。

存儲的生命周期

localStorage的存儲周期為永久，只要開發者不手動刪除，會一直存在

sessionStorage的存儲周期為當前會話，數據會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時

操作方法

localstorage是以key-value的形式進行存儲的，H5封裝好了localstorage的操作方法

localstorage.length: 獲取當前存儲的鍵值對數量

localstorage.key(n):獲取第n項的鍵值

localstorage.getItem(key):獲取對應鍵值的數據

localstorage.setItem(key,value):設置對應的鍵值對

localstorage.remove(key):清除某個數據

localstorage.clear():清除存儲的所有數據

需要注意的是：

localstorage存儲的值只能是字符串的形式，當我們存儲數據為引用對象的時候，會默認調用對象的toString方法，轉化為字符串在存儲。所以我們在存儲數組時，存儲的數據會將數據項以,隔開，解析的時候需要我們分解成為數組再操作。而對於對象，我們需要用JSON.stringify轉化存儲，獲取數據后再用JSON.parse轉化為對象

var mylocalStorage = window.localStorage;

      mylocalStorage.clear();
      mylocalStorage.setItem('test-arry',[1,2,3,4])

      console.log('數組的值',mylocalStorage.getItem('test-arry'));

      //獲取數組第一項
       console.log('數組的第一項值',mylocalStorage.getItem('test-arry').split(',')[0]);

      var data = {
        'a' : 1,
        'b' : 3
      }

      var dataStr = JSON.stringify(data);
      mylocalStorage.setItem('test-obj',data)
      console.log('直接存儲對象',mylocalStorage.getItem('test-obj'));

      mylocalStorage.setItem('test-str',dataStr)
      console.log('轉化后存儲對象',mylocalStorage.getItem('test-str'));

      var data = JSON.parse(mylocalStorage.getItem('test-str'));
      console.log('重新解析對象',data);

運行結果：

localStroage的適用范圍：

localStroage有5M的容量可以存儲，所以可以存儲一些不需要和服務器進行交互的一些數據。比如導航欄當前的狀態，一些普通的數據進行緩存。甚至我們可以存儲html片段，js或者css文件段。由於現在手機端對於localstroage的支持已經非常完善，有很多應用通過版本控制來存儲一些不經常改動的js/css文件。減少用戶請求帶寬的同時優化整個頁面的加載速度。

3、離線緩存 application cache

應用程序緩存，是從瀏覽器的緩存中分出來的一塊緩存區，要想在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。

application cache通過mainfest文件指定了緩存的資源，可以使我們的應用在斷網的時候也能夠使用。

瀏覽器支持：

IE10+、Firefox3+、Safari4+、Opera10.6、Chrome、iOS3.2+、Android Webkit

application cache的使用比較簡單，只需要兩步

1、服務器端需要維護一個manifest清單

2、Html標簽用屬性manifest引入文件即可

Manifest 文件

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分為三個部分：

CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存

NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存

FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）

常用API：

核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：

0（UNCACHED） :  無緩存， 即沒有與頁面相關的應用緩存

1（IDLE） : 閑置，即應用緩存未得到更新

2 （CHECKING） : 檢查中，即正在下載描述文件並檢查更新

3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源

4 （UPDATEREADY） : 更新完成，所有資源都已下載完畢

5 （IDLE） :  廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存

相關的事件：

表示應用緩存狀態的改變：

checking : 在瀏覽器為應用緩存查找更新時觸發

error : 在檢查更新或下載資源期間發送錯誤時觸發

noupdate : 在檢查描述文件發現文件無變化時觸發

downloading : 在開始下載應用緩存資源時觸發

progress：在文件下載應用緩存的過程中持續不斷地下載地觸發

updateready : 在頁面新的應用緩存下載完畢觸發

cached : 在應用緩存完整可用時觸發

整個工作流程如下圖：

注意事項：

1、瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）

2、如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存

3、引用manifest的html必須與manifest文件同源，在同一個域下

4、瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。

5、 manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關系，如果是隱式聲明需要在最前面

6、FALLBACK中的資源必須和manifest文件同源

7、 更新完版本后，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況），需要添加監聽版本事件。

8、站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問

9、當manifest文件發生改變時，資源請求本身也會觸發更新頁面資源的請求跟緩存的加載是同時執行的，所以首次更新manifest時，因為頁面加載已經開始甚至已經完成，緩存更新尚未完成，瀏覽器仍然會使用過期的資源；瀏覽器是當Application Cache有更新時，該次不會使用新資源，第二次才會使用。這個時候update事件中執行window.reload事件。

window.applicationCache.addEventListener("updateready", function(){
    window.location.reload()
});

10、根據Application Cache的加載機制，如果僅僅修改資源文件的內容（沒有修改資源文件的路徑或名稱），瀏覽器將直接從本地離線緩存中獲取資源文件。所以在每次修改資源文件的同時，需要修改manifest文件，以觸發資源文件的重新加載和緩存。這其中，最有效的方式是修改manifest文件內部的版本注釋

 

離線緩存與傳統瀏覽器緩存區別：

1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件

2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行

3. 離線緩存可以主動通知瀏覽器更新資源

總結：

瀏覽器的緩存在我們優化頁面的時候很有用，特別是在移動端的時候。我們可以用localstorage來存儲一些ajax請求的數據，或者一些經常不變的數據，如頁面的bar數據等等，可以在結果沒有返回的時候先用舊的數據進行填充，避免頁面無數據狀態過長。同時我們可以利用離線存儲的功能來對一些公共的或者常用的js/css文件進行緩存到本地，避免用戶網絡訪問請求，從而節約帶寬並且提升網頁加載速度。

 

 參考： http://www.tuicool.com/articles/zmUrU3r