4.3 Web Storage

在HTML5之前，如果開發(fā)者要在客戶端存儲少量數(shù)據(jù)，只能使用Cookie實現(xiàn)，Cookie通過HTTP Headers從服務器端返回到瀏覽器上。首先，服務器端在響應中利用Set-Cookie header來創(chuàng)建Cookie，然后，瀏覽器在它的請求中通過Cookie header包含已經(jīng)創(chuàng)建的Cookie，并且將它返回至服務器，從而完成客戶端的驗證。

Cookie的兼容性較好，其優(yōu)點主要有：

● 可以靈活地配置Cookie的過期時間，可以設置Cookie瀏覽器會話結(jié)束失效，也可以設置其永久有效。

● 不需要任何服務器資源。

● Cookie是一種基于文本的輕量級結(jié)構(gòu)，包含簡單的鍵／值對。

但是使用Cookie也有一些弊端，主要表現(xiàn)為：

● Cookie會被附加到HTTP請求中發(fā)送到服務器，無形中會增加流量。

● HTTP請求中的Cookie是明文傳遞，存在一定的安全問題。

● Cookie的大小被限制為4KB，不適用于復雜的存儲需求。

關(guān)于Cookie的內(nèi)容本書后面有更詳細的介紹。

HTML5中提出了新的Web存儲方案，即Web Storage和Web SQL。Web Storage可以將信息以鍵／值對的形式保存到客戶端，Web Storage提供了兩種在客戶端存儲數(shù)據(jù)的方法，即localStorage和sessionStorage。二者非常類似，區(qū)別僅在于生存周期不同。localStorage是一種沒有時間限制的存儲方式，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)可以永遠有效，因此localStorage可用于本地持久化存儲。sessionStorage的生存周期是會話周期，存儲數(shù)據(jù)在同一個會話周期內(nèi)的頁面可以訪問，當會話結(jié)束后數(shù)據(jù)也隨之失效。Web Storage數(shù)據(jù)存儲機制相比于Cookie有明顯的優(yōu)勢，主要表現(xiàn)為：

● 存儲空間的大小一般為5～10MB，與具體的瀏覽器有關(guān)。

● 存儲內(nèi)容僅僅存儲在客戶端本地，不會被發(fā)送到服務器。

● 提供了更豐富、更易用的接口，操作更加方便。

1．Web Storage的方法

Web Storage的方法包括：

● setItem(key, value)——將數(shù)據(jù)存儲到指定鍵對應的位置。如果值已存在，則替換原值。

● getItem(key, value)——根據(jù)給定的鍵返回相應的值。也可以將storage對象作為數(shù)組，通過下標訪問。如果指定的鍵不存在，則返回null。

● removeItem(key)——刪除指定鍵對應的值。如果沒有指定的鍵值，則不執(zhí)行任何操作。

● clear()——刪除storage對象存儲列表中的所有數(shù)據(jù)。如果storage對象中沒有存儲數(shù)據(jù)，則不執(zhí)行任何操作。

2．Web Storage的屬性

Web Storage的屬性包括：

● length——獲取當前storage對象中存儲鍵／值對的數(shù)量。

● key(index)——獲取指定位置的鍵值，index從0開始，到length-1結(jié)束。

3．Web Storage的事件

Web Storage提供了事件通知機制，可以將數(shù)據(jù)更新通知發(fā)送給監(jiān)聽者。當Web Storage存儲區(qū)域的數(shù)據(jù)真正發(fā)生變化時，會觸發(fā)storage事件。如果當前的存儲區(qū)域為空，調(diào)用clear()方法不會觸發(fā)storage事件。如果通過setItem()方法設置的鍵值與原鍵值相同，也不會觸發(fā)storage事件。無論監(jiān)聽窗口本身是否有數(shù)據(jù)變化，與數(shù)據(jù)發(fā)生變化的同源的每個窗口的window對象都會觸發(fā)storage事件。因此，storage事件可用于同源的多頁面之間相互通信。Web Storage的事件對象event的屬性包括：

● key——值發(fā)生變化（被更新或者被刪除）的鍵。

● oldValue——更新前的鍵值。如果是新添加的數(shù)據(jù)，則oldValue為null。

● newValue——更新后的鍵值。如果是新刪除的數(shù)據(jù)，則newValue為null。

● url——storage事件發(fā)生的源。

● storageArea——該屬性是一個引用，指向值發(fā)生改變的localStorage或者sessionStorage對象。

關(guān)于Web Storage需要注意以下幾點：

● Web Storage存儲的鍵和值都只能是字符串。

● 不同的瀏覽器無法共享localStorage或sessionStorage中的信息。相同的瀏覽器的不同頁面間可以共享localStorage，但是不同頁面或標簽頁間無法共享sessionStorage的信息。頁面及標簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且屬于同源頁面，那么可以共享sessionStorage。

localStorage的使用示例可參考localStorage.html。

localStorage.html：

localStorage.html在瀏覽器中的顯示結(jié)果如圖4-3所示，既可以將頁面上的新值保存到localStorage中，也可在將localStorage中的值讀取到頁面上顯示。

使用sessionStorage實現(xiàn)計數(shù)器的示例可參考sessionStorage.html。

sessionStorage.html：

單擊按鈕一次后的sessionStorage.html的顯示結(jié)果如圖4-4所示，重復單擊按鈕時，可以顯示單擊按鈕的總次數(shù)，只要當前會話有效，單擊按鈕的次數(shù)可以累加。