淺談前端存儲

淺談前端存儲

前言

web應用容許使用瀏覽器提供的API實現將數據存儲到用戶的電腦上，這種客戶端存儲至關於賦予了Web瀏覽器記憶功能。

客戶端存儲遵循「同源策略」，所以不一樣站點的頁面是沒法相互讀取對方存儲的數據

客戶端存儲有如下幾種形式：

1. Web存儲

2. cookie

3. IE User Data

4. 離線Web應用

5. web數據庫

6. 文件系統API

Web Storgage

實現了「web存儲」草案標準的瀏覽器在Window對象上定義了兩個屬性：localStorage和sessionStorage。

支持這兩個屬性的瀏覽器包括IE8+、Firefox3.5+、Chrome4+、Opera10.5+

webStorage的目的是克服由cookie帶來的一些限制，當數據須要被嚴格控制在客戶端上時，無須持續地將數據發回服務器。
webStorage的兩個主要目標是：

• 提供一種在cookie以外存儲會話數據的途徑

• 提供一種存儲大量能夠跨會話存在的數據的機制

有效期

• 經過localStorage存儲的數據是永久性的，除非web應用刻意刪除存儲的數據，或者用戶經過設置瀏覽器配置（瀏覽器提供的特定的UI）來刪除，不然數據將一直保留在用戶的電腦上永不過時

• sessionStorage的有效期和存儲數據的腳本所在的最頂層的窗口或者是瀏覽器標籤頁是同樣的。一旦窗口或者標籤頁被永久關閉了，那麼全部經過sessionStorage存儲的數據也都被刪除了。（現代瀏覽器已經具有了從新打開最近關閉的標籤頁隨後恢復上一次瀏覽的會話功能，所以，這些標籤頁以及與之相關的sessionStorage的有效期可能會更長）。

做用域

• localStorage的做用域是限定在文檔源級別的，它一樣也受瀏覽器供應商限制。

• sessionStorage的做用域也限定在文檔源中，不只如此她還被限定在窗口中

存儲API

localStorage和sessionStorage一般被當作普通的JS對象使用，這兩個對象提供了正式的API

• 保存數據：localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

• 讀取數據：localStorage.getItem( key ); sessionStorage.getItem( key );

• 刪除單個數據：localStorage.removeItem( key ); sessionStorage.removeItem( key );

• 刪除全部數據：localStorage.clear( ); sessionStorage.clear( );

• 獲得某個索引的key：localStorage.key( index ); sessionStorage.key( index );

注：兩個都有屬性 length 表示key 的個數，也即 key 長度。key和value都必須爲字符串。

Storage事件

對Storage對象進行任何修改，都會在文檔上觸發storage事件。這個事件的event對象有如下屬性：

• domain：發生變化的存儲空間的域名

• key：設置或者刪除的鍵名

• newValue：若是是設置值，則是新值；若是是刪除鍵，則是null。

• oldValue：鍵被更改以前的值

限制

對於localStorage和sessionStorage的存儲限制因瀏覽器而異。具體參考：http://dev-test.nemikor.com/web-storage/support-test/

Cookie

概念

cookie是指Web瀏覽器存儲的少許數據，同時它是與具體的Web頁面或者站點相關的。最初是在客戶端用於存儲會話信息的。

有效期

cookie默認的有效期很短暫，他只能持續在web瀏覽器的會話期間，一旦用戶關閉瀏覽器，cookie保存的數據就丟失。

注：與sessionStorage有效期不一樣，它的有效期和整個瀏覽器進程而不是單個瀏覽器窗口的有效期一致。

若是須要延長cookie的有效期，能夠經過設置max-age屬性，並明確告訴瀏覽器cookie的有效期有多長。

做用域

cookie的做用域是經過文檔源和文檔路徑來肯定的。可經過path設置路徑，domain設置域名。

注：cookie的path屬性不能被用作訪問控制機制。若一個頁面想讀取同一站點其餘頁面的cookie，只要簡單地將其餘頁面以隱藏<iframe>的形式加載進來，隨後讀取對應文檔的cookie就能夠。

安全secure

它是一個布爾值類型的屬性，用來代表cookie的值以何種形式傳播。其默認是以不安全的形式（經過普通的、不安全的HTTP鏈接）傳遞的。若secure屬性被標識，那就只能當瀏覽器和服務器經過HTTPS或者其餘的安全協議鏈接（SSL）的時候才能傳遞它。

侷限性

每一個特定的域名下最多生成20個cookie

1. IE6或更低版本最多20個cookie

2. IE7和以後的版本最多能夠有50個cookie

3. Firefox最多50個cookie

4. Chrome和Safari沒有作硬性限制

5. IE和Opera會清理近期最少使用的cookie，Firefox會隨機清理cookie

cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。

在js中處理cookie

在js中處理cookie有些複雜，其接口不友好（BOM的document.cookie）;

cookie的名/值對都是通過URL編碼的，因此必須使用decodeURIComponent ( ) 來解碼

因爲JavaScript中讀寫cookie不是很是直觀，經常須要寫一些函數來簡化cookie的功能。基本的cookie操做有三種：讀取、寫入、刪除。以下例所示：

var CookieUtil = {
    
    get:function(name){
        var cookieName = enCodeURIComponent(name) + '',
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1){
            var cookieEnd = document.cookie.indexOf(";",cookieStart);
            if(cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length , cookieEnd));
        }
        return cookieValue;
    },

    set:function(name,value,expires,path,domain,secure){
        var cookieText = encodeURIComponent(name) + "=" +encodeURIComponent(value);
        if(expires instanceof Date){
            cookieText += ";expires=" + expires.toGMTString();
        }
        if(path){
            cookieText += ";path=" + path;
        }
        if(domain){
            cookieText += ";domain=" + domain;
        }
        if(secure){
            cookieText += ";secure";
        }
        document.cookie = cookieText;
    },

    del:function(name,path,domain,secure){
        this.set(name,"",new Date(0),path,domain,secure);
    }
    
};

IE userData

微軟在IE5及以後的IE瀏覽器中實現了它專屬的客戶端存儲機制——userData。

indexedDB

indexed Database API，或者簡稱爲indexedDB，是瀏覽器中保存結構化數據的一種數據庫。目前，Chrome 27+、Firefox 21+和Opera 15+支持這個API，可是Safari和IE10+僅有部分支持。

應用緩存Application Cache

HTML5中新增了「應用程序緩存」，容許Web應用將應用程序自身本地保存到用戶的瀏覽器中，是專門爲開發離線Web應用而設計的，可簡稱爲appCache。

描述文件

想要在這個緩存中保存數據，可使用一個描述文件（manifest file），列出要下載和緩存的資源。
下面是一個簡單的示例：

CACHE MANIFEST
#註釋
reshui.html
reshui.css
reshui.js

要將描述文件與頁面關聯起來，可在<html>中的manifest屬性中指定這個文件的路徑，這個文件的MIME類型必須是text/cache-manifest。如：

<html manifest="/reshui.manifest">

狀態

這個API的核心是applicationCache對象，這個對象有一個status屬性，屬性的值是常量，表示應用緩存的以下狀態：

• 0：無緩存，即沒有與頁面相關的應用緩存。

• 1：閒置：即應用緩存未獲得更新。

• 2：檢查中，即正在下載描述文件並檢查更新。

• 3：下載中，即應用緩存正在下載描述文件中指定的資源

• 4：更新完成，即應用緩存已經更新了資源，並且全部資源都已下載完畢，能夠經過swapCache ( ) 來使用

• 5：廢棄，即應用緩存的描述文件已經不存在了，所以頁面沒法再訪問應用緩存。

事件

appCache還有不少相關事件，表示其狀態的改變

• checking：在瀏覽器爲應用緩存查找更新時觸發

• error：在檢查更新或下載資源期間發生錯誤時觸發

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

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

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

• updateready：在頁面新的應用緩存下載完畢且能夠經過swapCache ( ) 使用時觸發。

• cached：在應用緩存完整可用時觸發
  通常來說，這些事件會隨着頁面加載按上述順序依次觸發。不過，經過調用update ( ) 方法也能夠手工干預，讓應用緩存完整可用時觸發。applicationCache.update ( )