[TOC] ## 概述 這個API的作用是，使得網頁可以在瀏覽器端儲存數據。它分成兩類：sessionStorage和localStorage。 sessionStorage保存的數據用于瀏覽器的一次會話，當會話結束（通常是該窗口關閉），數據被清空；localStorage保存的數據長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前保存的數據。除了保存期限的長短不同，這兩個對象的屬性和方法完全一樣。 它們很像cookie機制的強化版，能夠動用大得多的存儲空間。目前，每個域名的存儲上限視瀏覽器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存儲空間由一級域名決定，而其他瀏覽器沒有這個限制。也就是說，在Firefox中，a.example.com和b.example.com共享5MB的存儲空間。另外，與cookie一樣，它們也受同域限制。某個網頁存入的數據，只有同域下的網頁才能讀取。 通過檢查window對象是否包含sessionStorage和localStorage屬性，可以確定瀏覽器是否支持這兩個對象。 ~~~ function checkStorageSupport() { // sessionStorage if (window.sessionStorage) { return true; } else { return false; } // localStorage if (window.localStorage) { return true; } else { return false; } } ~~~ ## 操作方法 ### 存入/讀取數據 sessionStorage和localStorage保存的數據，都以“鍵值對”的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。所有的數據都是以文本格式保存。 存入數據使用setItem方法。它接受兩個參數，第一個是鍵名，第二個是保存的數據。 ~~~ sessionStorage.setItem("key","value"); localStorage.setItem("key","value"); ~~~ 讀取數據使用getItem方法。它只有一個參數，就是鍵名。 ~~~ var valueSession = sessionStorage.getItem("key"); var valueLocal = localStorage.getItem("key"); ~~~ ### 清除數據 removeItem方法用于清除某個鍵名對應的數據。 ~~~ sessionStorage.removeItem('key'); localStorage.removeItem('key'); ~~~ clear方法用于清除所有保存的數據。 ~~~ sessionStorage.clear(); localStorage.clear(); ~~~ ### 遍歷操作 利用length屬性和key方法，可以遍歷所有的鍵。 ~~~ for(var i = 0; i < localStorage.length; i++){ console.log(localStorage.key(i)); } ~~~ 其中的key方法，根據位置（從0開始）獲得鍵值。 ~~~ localStorage.key(1); ~~~ ## storage事件 當儲存的數據發生變化時，會觸發storage事件。我們可以指定這個事件的回調函數。 ~~~ window.addEventListener("storage",onStorageChange); ~~~ 回調函數接受一個event對象作為參數。這個event對象的key屬性，保存發生變化的鍵名。 ~~~ function onStorageChange(e) { console.log(e.key); } ~~~ 除了key屬性，event對象的屬性還有三個： * oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。 * newValue：更新后的值。如果該鍵被刪除，則這個屬性為null。 * url：原始觸發storage事件的那個網頁的網址。 值得特別注意的是，該事件不在導致數據變化的當前頁面觸發。如果瀏覽器同時打開一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的數據時，其他所有頁面的storage事件會被觸發，而原始頁面并不觸發storage事件。可以通過這種機制，實現多個窗口之間的通信。所有瀏覽器之中，只有IE瀏覽器除外，它會在所有頁面觸發storage事件。 ## 參考鏈接 * Ryan Stewart，[Introducing the HTML5 storage APIs](http://www.adobe.com/devnet/html5/articles/html5-storage-apis.html) * [Getting Started with LocalStorage](http://codular.com/localstorage) * Feross Aboukhadijeh,?[Introducing the HTML5 Hard Disk Filler? API](http://feross.org/fill-disk/) * Ben Summers,?[Inter-window messaging using localStorage](http://bens.me.uk/2013/localstorage-inter-window-messaging) * Stack Overflow,?[Why does Internet Explorer fire the window “storage” event on the window that stored the data?](http://stackoverflow.com/questions/18265556/why-does-internet-explorer-fire-the-window-storage-event-on-the-window-that-st)