前言
web應(yīng)用允許使用瀏覽器提供的API實(shí)現(xiàn)將數(shù)據(jù)存儲(chǔ)到用戶的電腦上，這種客戶端存儲(chǔ)相當(dāng)于賦予了Web瀏覽器記憶功能。
客戶端存儲(chǔ)遵循“同源策略”，因此不同站點(diǎn)的頁(yè)面是無(wú)法相互讀取對(duì)方存儲(chǔ)的數(shù)據(jù)
客戶端存儲(chǔ)有以下幾種形式：
1、Web存儲(chǔ)
2、cookie
3、IE User Data
4、離線Web應(yīng)用
5、web數(shù)據(jù)庫(kù)
6、文件系統(tǒng)API
Web Storgage
實(shí)現(xiàn)了“web存儲(chǔ)”草案標(biāo)準(zhǔn)的瀏覽器在Window對(duì)象上定義了兩個(gè)屬性：localStorage和sessionStorage。
支持這兩個(gè)屬性的瀏覽器包括IE8+、Firefox3.5+、Chrome4+、Opera10.5+
webStorage的目的是克服由cookie帶來(lái)的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時(shí)，無(wú)須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。
webStorage的兩個(gè)主要目標(biāo)是：
提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的途徑
提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制
有效期
通過(guò)localStorage存儲(chǔ)的數(shù)據(jù)是永久性的，除非web應(yīng)用刻意刪除存儲(chǔ)的數(shù)據(jù)，或者用戶通過(guò)設(shè)置瀏覽器配置（瀏覽器提供的特定的UI）來(lái)刪除，否則數(shù)據(jù)將一直保留在用戶的電腦上永不過(guò)期
sessionStorage的有效期和存儲(chǔ)數(shù)據(jù)的腳本所在的最頂層的窗口或者是瀏覽器標(biāo)簽頁(yè)是一樣的。一旦窗口或者標(biāo)簽頁(yè)被永久關(guān)閉了，那么所有通過(guò)sessionStorage存儲(chǔ)的數(shù)據(jù)也都被刪除了。（現(xiàn)代瀏覽器已經(jīng)具備了重新打開(kāi)最近關(guān)閉的標(biāo)簽頁(yè)隨后恢復(fù)上一次瀏覽的會(huì)話功能，因此，這些標(biāo)簽頁(yè)以及與之相關(guān)的sessionStorage的有效期可能會(huì)更長(zhǎng)）。
作用域
localStorage的作用域是限定在文檔源級(jí)別的，它同樣也受瀏覽器供應(yīng)商限制。
sessionStorage的作用域也限定在文檔源中，不僅如此她還被限定在窗口中
存儲(chǔ)API
localStorage和sessionStorage通常被當(dāng)做普通的JS對(duì)象使用，這兩個(gè)對(duì)象提供了正式的API
保存數(shù)據(jù)：localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
讀取數(shù)據(jù)：localStorage.getItem( key ); sessionStorage.getItem( key );
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem( key ); sessionStorage.removeItem( key );
刪除所有數(shù)據(jù)：localStorage.clear( ); sessionStorage.clear( );
得到某個(gè)索引的key：localStorage.key( index ); sessionStorage.key( index );
注：兩個(gè)都有屬性 length 表示key 的個(gè)數(shù)，也即 key 長(zhǎng)度。key和value都必須為字符串。
Storage事件
對(duì)Storage對(duì)象進(jìn)行任何修改，都會(huì)在文檔上觸發(fā)storage事件。這個(gè)事件的event對(duì)象有以下屬性：
domain：發(fā)生變化的存儲(chǔ)空間的域名
key：設(shè)置或者刪除的鍵名
newValue：如果是設(shè)置值，則是新值；如果是刪除鍵，則是null。
oldValue：鍵被更改之前的值
限制
對(duì)于localStorage和sessionStorage的存儲(chǔ)限制因?yàn)g覽器而異。具體參考：http://dev-test.nemikor.com/web-storage/support-test/
Cookie
概念
cookie是指Web瀏覽器存儲(chǔ)的少量數(shù)據(jù)，同時(shí)它是與具體的Web頁(yè)面或者站點(diǎn)相關(guān)的。最初是在客戶端用于存儲(chǔ)會(huì)話信息的。
有效期
cookie默認(rèn)的有效期很短暫，他只能持續(xù)在web瀏覽器的會(huì)話期間，一旦用戶關(guān)閉瀏覽器，cookie保存的數(shù)據(jù)就丟失。
注：與sessionStorage有效期不同，它的有效期和整個(gè)瀏覽器進(jìn)程而不是單個(gè)瀏覽器窗口的有效期一致。
如果需要延長(zhǎng)cookie的有效期，可以通過(guò)設(shè)置max-age屬性，并明確告訴瀏覽器cookie的有效期有多長(zhǎng)。
作用域
cookie的作用域是通過(guò)文檔源和文檔路徑來(lái)確定的。可通過(guò)path設(shè)置路徑，domain設(shè)置域名。
注：cookie的path屬性不能被用做訪問(wèn)控制機(jī)制。若一個(gè)頁(yè)面想讀取同一站點(diǎn)其他頁(yè)面的cookie，只要簡(jiǎn)單地將其他頁(yè)面以隱藏的形式加載進(jìn)來(lái)，隨后讀取對(duì)應(yīng)文檔的cookie就可以。
安全secure
它是一個(gè)布爾值類(lèi)型的屬性，用來(lái)表明cookie的值以何種形式傳播。其默認(rèn)是以不安全的形式（通過(guò)普通的、不安全的HTTP連接）傳遞的。若secure屬性被標(biāo)識(shí)，那就只能當(dāng)瀏覽器和服務(wù)器通過(guò)HTTPS或者其他的安全協(xié)議連接（SSL）的時(shí)候才能傳遞它。
局限性
每個(gè)特定的域名下最多生成20個(gè)cookie
IE6或更低版本最多20個(gè)cookie
IE7和之后的版本最多可以有50個(gè)cookie
Firefox最多50個(gè)cookie
Chrome和Safari沒(méi)有做硬性限制
IE和Opera會(huì)清理近期最少使用的cookie，F(xiàn)irefox會(huì)隨機(jī)清理cookie
cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過(guò)4095字節(jié)。
在js中處理cookie
在js中處理cookie有些復(fù)雜，其接口不友好（BOM的document.cookie）;
cookie的名/值對(duì)都是經(jīng)過(guò)URL編碼的，所以必須使用decodeURIComponent ( ) 來(lái)解碼
由于JavaScript中讀寫(xiě)cookie不是非常直觀，常常需要寫(xiě)一些函數(shù)來(lái)簡(jiǎn)化cookie的功能。基本的cookie操作有三種：讀取、寫(xiě)入、刪除。如下例所示：
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)了它專屬的客戶端存儲(chǔ)機(jī)制——userData。
indexedDB
indexed Database API，或者簡(jiǎn)稱為indexedDB，是瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種數(shù)據(jù)庫(kù)。目前，Chrome 27+、Firefox 21+和Opera 15+支持這個(gè)API，但是Safari和IE10+僅有部分支持。
應(yīng)用緩存Application Cache
HTML5中新增了“應(yīng)用程序緩存”，允許Web應(yīng)用將應(yīng)用程序自身本地保存到用戶的瀏覽器中，是專門(mén)為開(kāi)發(fā)離線Web應(yīng)用而設(shè)計(jì)的，可簡(jiǎn)稱為appCache。
描述文件
想要在這個(gè)緩存中保存數(shù)據(jù)，可以使用一個(gè)描述文件（manifest file），列出要下載和緩存的資源。
下面是一個(gè)簡(jiǎn)單的示例：
CACHE MANIFEST
#注釋
reshui.html
reshui.css
reshui.js
要將描述文件與頁(yè)面關(guān)聯(lián)起來(lái)，可在中的manifest屬性中指定這個(gè)文件的路徑，這個(gè)文件的MIME類(lèi)型必須是text/cache-manifest。如：
狀態(tài)
這個(gè)API的核心是applicationCache對(duì)象，這個(gè)對(duì)象有一個(gè)status屬性，屬性的值是常量，表示應(yīng)用緩存的如下?tīng)顟B(tài)：
0：無(wú)緩存，即沒(méi)有與頁(yè)面相關(guān)的應(yīng)用緩存。
1：閑置：即應(yīng)用緩存未得到更新。
2：檢查中，即正在下載描述文件并檢查更新。
3：下載中，即應(yīng)用緩存正在下載描述文件中指定的資源
4：更新完成，即應(yīng)用緩存已經(jīng)更新了資源，而且所有資源都已下載完畢，可以通過(guò)swapCache ( ) 來(lái)使用
5：廢棄，即應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁(yè)面無(wú)法再訪問(wèn)應(yīng)用緩存。
事件
appCache還有很多相關(guān)事件，表示其狀態(tài)的改變
checking：在瀏覽器為應(yīng)用緩存查找更新時(shí)觸發(fā)
error：在檢查更新或下載資源期間發(fā)生錯(cuò)誤時(shí)觸發(fā)
noupdate：在檢查描述文件發(fā)現(xiàn)文件無(wú)變化時(shí)觸發(fā)
downloading：在開(kāi)始下載應(yīng)用緩存資源時(shí)觸發(fā)
progress：在文件下載應(yīng)用緩存的過(guò)程中持續(xù)不斷地觸發(fā)
updateready：在頁(yè)面新的應(yīng)用緩存下載完畢且可以通過(guò)swapCache ( ) 使用時(shí)觸發(fā)。
cached：在應(yīng)用緩存完整可用時(shí)觸發(fā)
一般來(lái)講，這些事件會(huì)隨著頁(yè)面加載按上述順序依次觸發(fā)。不過(guò)，通過(guò)調(diào)用update ( ) 方法也可以手工干預(yù)，讓?xiě)?yīng)用緩存完整可用時(shí)觸發(fā)。applicationCache.update ( )
掃一掃 加微信咨詢
