前言

web應(yīng)用允許使用瀏覽器提供的API實(shí)現(xiàn)將數(shù)據(jù)存儲到用戶的電腦上，這種客戶端存儲相當(dāng)于賦予了Web瀏覽器記憶功能。

客戶端存儲遵循“同源策略”，因此不同站點(diǎn)的頁面是無法相互讀取對方存儲的數(shù)據(jù)

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

1、Web存儲

2、cookie

3、IE User Data

4、離線Web應(yīng)用

5、web數(shù)據(jù)庫

6、文件系統(tǒng)API

Web Storgage

---

實(shí)現(xiàn)了“web存儲”草案標(biāo)準(zhǔn)的瀏覽器在Window對象上定義了兩個屬性：localStorage和sessionStorage。

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

webStorage的目的是克服由cookie帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時，無須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。

webStorage的兩個主要目標(biāo)是：

1. 提供一種在cookie之外存儲會話數(shù)據(jù)的途徑

2. 提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機(jī)制

有效期

1. 通過localStorage存儲的數(shù)據(jù)是永久性的，除非web應(yīng)用刻意刪除存儲的數(shù)據(jù)，或者用戶通過設(shè)置瀏覽器配置（瀏覽器提供的特定的UI）來刪除，否則數(shù)據(jù)將一直保留在用戶的電腦上永不過期




2. sessionStorage的有效期和存儲數(shù)據(jù)的腳本所在的最頂層的窗口或者是瀏覽器標(biāo)簽頁是一樣的。一旦窗口或者標(biāo)簽頁被永久關(guān)閉了，那么所有通過sessionStorage存儲的數(shù)據(jù)也都被刪除了。（現(xiàn)代瀏覽器已經(jīng)具備了重新打開最近關(guān)閉的標(biāo)簽頁隨后恢復(fù)上一次瀏覽的會話功能，因此，這些標(biāo)簽頁以及與之相關(guān)的sessionStorage的有效期可能會更長）。

作用域

1. localStorage的作用域是限定在文檔源級別的，它同樣也受瀏覽器供應(yīng)商限制。

2. sessionStorage的作用域也限定在文檔源中，不僅如此她還被限定在窗口中

存儲API

localStorage和sessionStorage通常被當(dāng)做普通的JS對象使用，這兩個對象提供了正式的API

1. 保存數(shù)據(jù)：localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

2. 讀取數(shù)據(jù)：localStorage.getItem( key ); sessionStorage.getItem( key );

3. 刪除單個數(shù)據(jù)：localStorage.removeItem( key ); sessionStorage.removeItem( key );

4. 刪除所有數(shù)據(jù)：localStorage.clear( ); sessionStorage.clear( );

5. 得到某個索引的key：localStorage.key( index ); sessionStorage.key( index );

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

Storage事件

對Storage對象進(jìn)行任何修改，都會在文檔上觸發(fā)storage事件。這個事件的event對象有以下屬性：

1. domain：發(fā)生變化的存儲空間的域名

2. key：設(shè)置或者刪除的鍵名

3. newValue：如果是設(shè)置值，則是新值；如果是刪除鍵，則是null。

4. oldValue：鍵被更改之前的值

   
   

限制

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

Cookie

---

概念

cookie是指Web瀏覽器存儲的少量數(shù)據(jù)，同時它是與具體的Web頁面或者站點(diǎn)相關(guān)的。最初是在客戶端用于存儲會話信息的。

有效期

cookie默認(rèn)的有效期很短暫，他只能持續(xù)在web瀏覽器的會話期間，一旦用戶關(guān)閉瀏覽器，cookie保存的數(shù)據(jù)就丟失。

注：與sessionStorage有效期不同，它的有效期和整個瀏覽器進(jìn)程而不是單個瀏覽器窗口的有效期一致。

如果需要延長cookie的有效期，可以通過設(shè)置max-age屬性，并明確告訴瀏覽器cookie的有效期有多長。

作用域

cookie的作用域是通過文檔源和文檔路徑來確定的。可通過path設(shè)置路徑，domain設(shè)置域名。

注：cookie的path屬性不能被用做訪問控制機(jī)制。若一個頁面想讀取同一站點(diǎn)其他頁面的cookie，只要簡單地將其他頁面以隱藏的形式加載進(jìn)來，隨后讀取對應(yīng)文檔的cookie就可以。

安全secure

它是一個布爾值類型的屬性，用來表明cookie的值以何種形式傳播。其默認(rèn)是以不安全的形式（通過普通的、不安全的HTTP連接）傳遞的。若secure屬性被標(biāo)識，那就只能當(dāng)瀏覽器和服務(wù)器通過HTTPS或者其他的安全協(xié)議連接（SSL）的時候才能傳遞它。

局限性

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

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

2. IE7和之后的版本最多可以有50個cookie

3. Firefox最多50個cookie

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

5. IE和Opera會清理近期最少使用的cookie，F(xiàn)irefox會隨機(jī)清理cookie

cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。

在js中處理cookie

在js中處理cookie有些復(fù)雜，其接口不友好（BOM的document.cookie）;

cookie的名/值對都是經(jīng)過URL編碼的，所以必須使用decodeURIComponent ( ) 來解碼

由于JavaScript中讀寫cookie不是非常直觀，常常需要寫一些函數(shù)來簡化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瀏覽器中實(shí)現(xiàn)了它專屬的客戶端存儲機(jī)制——userData。

indexedDB

---

indexed Database API，或者簡稱為indexedDB，是瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種數(shù)據(jù)庫。目前，Chrome 27+、Firefox 21+和Opera 15+支持這個API，但是Safari和IE10+僅有部分支持。

應(yīng)用緩存Application Cache

---

HTML5中新增了“應(yīng)用程序緩存”，允許Web應(yīng)用將應(yīng)用程序自身本地保存到用戶的瀏覽器中，是專門為開發(fā)離線Web應(yīng)用而設(shè)計的，可簡稱為appCache。

描述文件

想要在這個緩存中保存數(shù)據(jù)，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。

下面是一個簡單的示例：

CACHE MANIFEST

#注釋

reshui.html

reshui.css

reshui.js

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

狀態(tài)

這個API的核心是applicationCache對象，這個對象有一個status屬性，屬性的值是常量，表示應(yīng)用緩存的如下狀態(tài)：

0：無緩存，即沒有與頁面相關(guān)的應(yīng)用緩存。

1：閑置：即應(yīng)用緩存未得到更新。

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

3：下載中，即應(yīng)用緩存正在下載描述文件中指定的資源

4：更新完成，即應(yīng)用緩存已經(jīng)更新了資源，而且所有資源都已下載完畢，可以通過swapCache ( ) 來使用

5：廢棄，即應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁面無法再訪問應(yīng)用緩存。

事件

appCache還有很多相關(guān)事件，表示其狀態(tài)的改變

checking：在瀏覽器為應(yīng)用緩存查找更新時觸發(fā)

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

noupdate：在檢查描述文件發(fā)現(xiàn)文件無變化時觸發(fā)

downloading：在開始下載應(yīng)用緩存資源時觸發(fā)

progress：在文件下載應(yīng)用緩存的過程中持續(xù)不斷地觸發(fā)

updateready：在頁面新的應(yīng)用緩存下載完畢且可以通過swapCache ( ) 使用時觸發(fā)。

cached：在應(yīng)用緩存完整可用時觸發(fā)

一般來講，這些事件會隨著頁面加載按上述順序依次觸發(fā)。不過，通過調(diào)用update ( ) 方法也可以手工干預(yù)，讓應(yīng)用緩存完整可用時觸發(fā)。applicationCache.update ( )

上一篇：利用Ubuntu部署PHP7、Nginx、MySQL網(wǎng)站環(huán)境過程

下一篇：JavaScript的typeof運(yùn)算符