存儲(chǔ)數(shù)據(jù)在客戶端可以解決很多的問題和減少不必要的傳輸數(shù)據(jù): 能保存程序的狀態(tài)/ 能緩存數(shù)據(jù)/能保存用戶的喜好等等以前的做法是很繁笨的，接下來將詳細(xì)介紹感興趣的朋友可以了解下，或許對(duì)你有所幫助

為什么要存數(shù)據(jù)到客戶端？

存儲(chǔ)數(shù)據(jù)在客戶端可以解決很多的問題和減少不必要的傳輸數(shù)據(jù)：

1. 能保存程序的狀態(tài)：用戶關(guān)閉瀏覽器再打開后能知道他工作到哪了。

2. 能緩存數(shù)據(jù)：很多不會(huì)變化的數(shù)據(jù)根本沒必要每次都從服務(wù)端獲取。

3. 能保存用戶的喜好：這種數(shù)據(jù)通常不需要存在服務(wù)端。

以前的做法

在HTML5本地存儲(chǔ)之前，如果我們想在客戶端保存持久化數(shù)據(jù)，有這么幾個(gè)選擇：

1. HTTP cookie。HTTP cookie的缺點(diǎn)很明顯，最多只能存儲(chǔ)4KB的數(shù)據(jù)，每個(gè)HTTP請(qǐng)求都會(huì)被傳送回服務(wù)器，明文傳輸（除非你使用SSL）。

2. IE userData。userData是微軟在上世紀(jì)90年代的瀏覽器大戰(zhàn)時(shí)推出的本地存儲(chǔ)方案，借助DHTML的behaviour屬性來存儲(chǔ)本地?cái)?shù)據(jù)， 允許每個(gè)頁面最多存儲(chǔ)64K數(shù)據(jù)，每個(gè)站點(diǎn)最多640K數(shù)據(jù)，userData的缺點(diǎn)顯而易見，它不是Web標(biāo)準(zhǔn)的一部分，除非你的程序只需要支持IE， 否則它基本沒什么用處。

3. Flash cookie。Flash cookie實(shí)際上和HTTP cookie并不是一回事，或許它的名字應(yīng)該叫做"Flash本地存儲(chǔ)”，F(xiàn)lash cookie默認(rèn)允許每個(gè)站點(diǎn)存儲(chǔ)不超過100K的數(shù)據(jù)，如果超出了，F(xiàn)lash會(huì)自動(dòng)向用戶請(qǐng)求更大的存儲(chǔ)空間，借助Flash的 ExternalInterface接口，你可以很輕松地通過Javascript操作Flash的本地存儲(chǔ)。Flash的問題很簡(jiǎn)單，就是因?yàn)樗?Flash。

4. Google Gears。Gears是Google在07年發(fā)布的一個(gè)開源瀏覽器插件，旨在改進(jìn)各大瀏覽器的兼容性，Gears內(nèi)置了一個(gè)基于SQLite的嵌入式 SQL數(shù)據(jù)庫(kù)，并提供了統(tǒng)一API對(duì)數(shù)據(jù)庫(kù)進(jìn)行訪問，在取得用戶授權(quán)之后，每個(gè)站點(diǎn)可以在SQL數(shù)據(jù)庫(kù)中存儲(chǔ)不限大小的數(shù)據(jù)，Gears的問題就是 Google自己都已經(jīng)不用它了。

眼花繚亂的各種技術(shù)導(dǎo)致的就是瀏覽器的兼容性問題。這里大家用的最多的可能就是cookie了。

HTML5中的全新體驗(yàn)

針對(duì)以上的問題，HTML5中給出了更加理想的解決方案：假如你需要存儲(chǔ)的只是簡(jiǎn)單的用key/value對(duì)即可解決的數(shù)據(jù)，則可以使用Web Storage。

與Cookie相比，Web Storage存在不少的優(yōu)勢(shì)，概括為以下幾點(diǎn)：

1. 存儲(chǔ)空間更大：IE8下每個(gè)獨(dú)立的存儲(chǔ)空間為10M，其他瀏覽器實(shí)現(xiàn)略有不同，但都比Cookie要大很多。

2. 存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器：當(dāng)設(shè)置了Cookie后，Cookie的內(nèi)容會(huì)隨著請(qǐng)求一并發(fā)送的服務(wù)器，這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)。而Web Storage中的數(shù)據(jù)則僅僅是存在本地，不會(huì)與服務(wù)器發(fā)生任何交互。

3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數(shù)據(jù)操作更為簡(jiǎn)便。

4. 獨(dú)立的存儲(chǔ)空間：每個(gè)域（包括子域）有獨(dú)立的存儲(chǔ)空間，各個(gè)存儲(chǔ)空間是完全獨(dú)立的，因此不會(huì)造成數(shù)據(jù)混亂。

Web Storage分類

Web Storage實(shí)際上由兩部分組成：sessionStorage與localStorage。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。

localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

檢查是否支持Web Storage

Web Storage在各大主流瀏覽器中都支持了，但是為了兼容老的瀏覽器，還是要檢查一下是否可以使用這項(xiàng)技術(shù)。

第一種方式：通過檢查Storage對(duì)象是否存在來檢查瀏覽器是否支持Web Storage：

代碼如下:

if(typeof(Storage)!=="undefined"){

// Yes! localStorage and sessionStorage support!

// Some code.....

} else {

// Sorry! No web storage support..

}

第二種方式就是分別檢查各自的對(duì)象，例如檢查localStorage是否支持：

代碼如下:

if (typeof(localStorage) == 'undefined' ) {

alert('Your browser does not support HTML5 localStorage. Try upgrading.');

} else {

// Yes! localStorage and sessionStorage support!

// Some code.....

}

或者：

if('localStorage' in window && window['localStorage'] !== null){

// Yes! localStorage and sessionStorage support!

// Some code.....

} else {

alert('Your browser does not support HTML5 localStorage. Try upgrading.');

}

或者

if (!!localStorage) {

// Yes! localStorage and sessionStorage support!

// Some code.....

} else {

alert('Your browser does not support HTML5 localStorage. Try upgrading.');

}

很顯然第一個(gè)方式最直接，也最簡(jiǎn)單。

Web Storage的使用

Web Storage中存儲(chǔ)的是鍵值對(duì)，而且瀏覽器會(huì)以字符串方式存儲(chǔ)。記住在必要的時(shí)候?qū)⑺麄冝D(zhuǎn)為其他格式。

sessionStorage與localStorage除了用途不同外，成員列表是一樣的：

代碼如下:

key = value: 存貯鍵值對(duì)

setItem(key, value): 存貯鍵值對(duì)

getItem(key): 取鍵值對(duì)

removeItem(key)：移除所有鍵值對(duì)

clear()：清空所有鍵值對(duì)

length：鍵值對(duì)的數(shù)目

這里還是要強(qiáng)調(diào)一下：setItem(key,value)方法中的value類型，理論上可以是任意類型，不過實(shí)際上瀏覽器會(huì)調(diào)用value的toString方法來獲取其字符串值并存儲(chǔ)到本地，因此如果是自定義的類型則需要自己定義有意義的toString方法。例如下面的例子結(jié)合JSON.stringify使用：

代碼如下:

var person = {'name': 'rainman', 'age': 24};

localStorage.setItem("me", JSON.stringify(person));

JSON.parse(localStorage.getItem('me')).name; // 'rainman'

/**

* JSON.stringify，將JSON數(shù)據(jù)轉(zhuǎn)化為字符串

* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred","age":24}'

* JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]'

* JSON.parse，反解JSON.stringify

* JSON.parse('["a","b","c"]') // ["a","b","c"]

*/

此外，添加鍵值對(duì)的時(shí)候，如果添加的數(shù)量比較多，比較保險(xiǎn)的做法是去檢查是否有超出限額的異常：

代碼如下:

try {

localStorage.setItem(itemId, values.join(';'));

} catch (e) {

if (e == QUOTA_EXCEEDED_ERR) {

alert('Quota exceeded!');

}

}

Web Storage的方法非常簡(jiǎn)單，下面的示例是統(tǒng)計(jì)button點(diǎn)擊的次數(shù)的：

代碼如下:

<!DOCTYPE html>

<html>

<head>

<script>

function clickCounter()

{

if(typeof(Storage)!=="undefined")

{

if (localStorage.clickcount)

{

localStorage.clickcount=Number(localStorage.clickcount)+1;

}

else

{

localStorage.clickcount=1;

}

document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

}

else

{

document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";

}

}

</script>

</head>

<body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>

<div id="result"></div>

<p>Click the button to see the counter increase.</p>

<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

</body>

</html>

在上面的例子中，你可以把localStorage換成sessionStorage，點(diǎn)擊幾次button然后驗(yàn)證在關(guān)閉瀏覽器前后的效果。

存在的問題

Web Storage的缺陷主要集中在其安全性方面，具體體現(xiàn)在以下兩點(diǎn)：

1. 瀏覽器會(huì)為每個(gè)域分配獨(dú)立的存儲(chǔ)空間，即腳本在域A中是無法訪問到域B中的存儲(chǔ)空間的，但是瀏覽器卻不會(huì)檢查腳本所在的域與當(dāng)前域是否相同。即在域B中嵌入域A中的腳本依然可以訪問域B中的數(shù)據(jù)。

2. 存儲(chǔ)在本地的數(shù)據(jù)未加密而且永遠(yuǎn)不會(huì)過期，極易造成隱私泄漏。

此外，更多的安全相關(guān)的問題請(qǐng)參看后面實(shí)用參考中的鏈接。

其他規(guī)范一覽(僅供了解，說不定什么時(shí)候就沒了)

Web Database

在老的HTML5提議中，假如你需要存儲(chǔ)復(fù)雜的數(shù)據(jù)則可以使用Web Database，可以像客戶端程序一樣使用SQL（Web Database標(biāo)準(zhǔn)已被廢棄，這里就是簡(jiǎn)單提一下）；

globalStorage

這個(gè)也是html5中提出來，在瀏覽器關(guān)閉以后，使用globalStorage存儲(chǔ)的信息仍能夠保留下來，localStorage一樣，域中任何一個(gè)頁面存儲(chǔ)的信息都能被所有的頁面共享， 不過目前只有FireFox支持。

基本語法:

• globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來進(jìn)行讀和寫。

• globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網(wǎng)頁都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來進(jìn)行讀和寫。

• globalStorage['org'] —— 在.org域名下面的所有網(wǎng)頁都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來進(jìn)行讀和寫。

• globalStorage[''] —— 在任何域名下的任何網(wǎng)頁都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來進(jìn)行讀和寫

方法屬性:

• setItem(key, value) —— 設(shè)置或重置 key 值。

• getItem(key) —— 獲取 key 值。

• removeItem(key) —— 刪除 key 值。

• 設(shè)置 key 值：window.globalStorage["planabc.net"].key = value;

• 獲取 key 值：value = window.globalStorage["planabc.net"].key;

其它特征:

• 過期時(shí)間同 localStorage，其它的一些特性也和localStorage相似。

• 現(xiàn)在Firefox只支持當(dāng)前域下的globalStorage存儲(chǔ)， 如果使用公用域會(huì)導(dǎo)致一個(gè)這樣一個(gè)類似的錯(cuò)誤“Security error” code: “1000”。

IndexedDB

最后我們要介紹的就是IndexedDB了，相比其他兩個(gè)規(guī)范，目前只有Firefox實(shí)現(xiàn)了IndexedDB（順便提一下，Mozilla表示它們永遠(yuǎn)不會(huì)去實(shí)現(xiàn)Web SQL Database），不過Google已經(jīng)表示正在考慮在Chrome中加入IndexDB支持。

IndexedDB引入了一個(gè)object store的概念，這有點(diǎn)像是一個(gè)SQL Database，你可以在“數(shù)據(jù)庫(kù)”中存儲(chǔ)“記錄”，并且每條“記錄”可以擁有很多“字段"，每個(gè)字段都有一個(gè)特定的數(shù)據(jù)類型，你可以選擇記錄的子集， 并使用“光標(biāo)”進(jìn)行遍歷，同時(shí)object store中的所有變更都是基于“事務(wù)”的。

更多的信息參看后面使用參考中講述FireFox中IndexedDB的文檔。