HTML5 本地儲存 Web Storage
Web Storage
Web Storage 是一項非常重要，並且很實用的技術，已經被大多數瀏覽器（包括IE8）所支援，
在HTML4時代， 雖然cookie無處不在，但cookie仍然有自己的硬傷，如：
- cookie的大小是受限制的，一個cookie只能設定4KB的資料。並且大多數瀏覽器只允許每個站點儲存20個Cookie；
- cookie儲存的資料，無論伺服器端是否需要，每次請求都會被髮送到伺服器端，白白耗費網路資源。並且，資料一般是非加密傳輸，存在安全隱患；
- cookie缺少操作資料的API，需要開發者自己封裝介面，使用起來極不方便。
為了解決cookie的不足，HTML5提出了Web Storage方案。那麼，什麼是Web Storage呢？簡單的講，Web Storage是網頁儲存的總稱，它讓Web頁面能夠把資料儲存在客戶端的計算機中。它具有以下優勢：
- 儲存空間大，預設5M；
- 資料儲存在客戶端，可以直接獲取，不會發送到伺服器，既節省網路資源，又安全可靠；
- 這種機制是 web 瀏覽器原生提供的，所以不需要第三方外掛的支援。
- 提供了操作資料的API，開發人員只需呼叫介面即可操作資料，簡單易用。
概述
Web Storage是網頁儲存的總稱，由 localStorage 和 sessionStorage 組成：
localStorage是持久化的本地儲存，除非主動對它進行增加、刪除、修改操作，否則它不會發生變化。資料儲存完成後，它們就一直儲存在使用者的計算機中，永不過期，哪怕關閉網頁或瀏覽器後再開啟，或電腦關機後再開機，這些資料依然存在。並且，任何視窗的任何頁面都可以訪問這些資料。
sessionStorage的特點是臨時儲存，用來儲存一個會話（session）中的資料。只有同一個會話中的頁面才能訪問這些資料，當會話結束後，資料也隨之自動銷燬。也就是說，只要瀏覽器視窗（或標籤）不關閉，資料就一直存在，一旦關閉視窗或瀏覽器，資料將被清除。
瀏覽器為Web Storage提供了相關的API，開發人員只需呼叫API即可操作資料，簡單易用。這些API見表 5‑1：
| API | 功能描述 |
|---|---|
| setItem(key,value) | 將 value 儲存到 key 欄位中 |
| getItem(key) | 獲取指定 key 的本地儲存值 |
| removeItem (key) | 刪除指定 key 的本地儲存值 |
| key(key) | 獲取指定索引對應的 key，索引號從0 |
| length() | 獲取物件中所儲存的鍵-值對的數目 |
| clear() | 刪除本地儲存的全部資料 |
此外，Web Storage 還提供了一個 storage 事件，當儲存區域的內容發生改變時，就會自動觸發該事件，並把它傳送給所有感興趣的監聽者。
由於 localStorage 和 sessionStorage 所提供的API和事件機制完全相同，它們之間的唯一不同，就是資料的生命期，一個是持久化儲存，一個是臨時儲存，僅此而已。因此，下面就以 localStorage 為例，來介紹Web Storage的 API 和 storage 事件機制。