Web Storage：瀏覽器端數據儲存機制

Storage 接口用於腳本在瀏覽器保存數據。兩個對象部署了這個接口：window.sessionStorage和window.localStorage。

sessionStorage保存的數據用於瀏覽器的一次會話（session），當會話結束（一般是窗口關閉），數據被清空；
localStorage保存的數據長期存在，下一次訪問該網站的時候，網頁能夠直接讀取之前保存的數據。

若用戶禁用第三方cookie，那麼將不容許來自第三方IFrames對Web Storage的訪問。（從Firefox 43版本開始實行）
本地存儲不一樣於mozStorage（Mozilla's XPCOM interfaces to SQLite）或Session store API（an XPCOM storage utility for use by extensions）。

保存的數據都以「鍵值對」的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。全部的數據都是以文本格式保存。

每一個域名的存儲上限視瀏覽器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB。Firefox 中，a.example.com和b.example.com共享 5MB 的存儲空間。與 Cookie 同樣，它們也受同域限制。某個網頁存入的數據，只有同域下的網頁才能讀取，若是跨域操做會報錯。

屬性和方法

Storage 接口只有一個屬性。
Storage.length：返回保存的數據項個數。

window.localStorage.setItem('foo', 'a');
window.localStorage.setItem('bar', 'b');
window.localStorage.setItem('baz', 'c');
window.localStorage.length // 3

Storage.setItem()

---

Storage.setItem()方法用於存入數據。它接受兩個參數，第一個是鍵名，第二個是保存的數據。若是鍵名已經存在，該方法會更新已有的鍵值。該方法沒有返回值。

window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');

Storage.setItem()兩個參數都是字符串。若是不是字符串，會自動轉成字符串，再存入瀏覽器。

window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem('3') // "[object Object]"

若是儲存空間已滿，該方法會拋錯。

直接賦值也是能夠的：

// 下面三種寫法等價
window.localStorage.foo = '123';
window.localStorage['foo'] = '123';
window.localStorage.setItem('foo', '123');

Storage.getItem()

Storage.getItem()方法用於讀取數據。它只有一個參數，就是鍵名。若是鍵名不存在，該方法返回null。

window.sessionStorage.getItem('key')window.localStorage.getItem('key')

鍵名應該是一個字符串

Storage.removeItem()

Storage.removeItem()方法用於清除某個鍵名對應的鍵值。它接受鍵名做爲參數，若是鍵名不存在，該方法不會作任何事情。

sessionStorage.removeItem('key');localStorage.removeItem('key');

Storage.clear()

Storage.clear()方法用於清除全部保存的數據。該方法的返回值是undefined。

window.sessionStorage.clear()

Storage.key()

Storage.key()接受一個整數做爲參數（從零開始），返回該位置對應的鍵值。

window.sessionStorage.setItem('key', 'value');
window.sessionStorage.key(0) // "key"

//結合使用Storage.length屬性和Storage.key()方法，能夠遍歷全部的鍵。
for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));}

storage 事件

Storage 接口儲存的數據發生變化時，會觸發 storage 事件，能夠指定這個事件的監聽函數。

window.addEventListener('storage', onStorageChange);

監聽函數接受一個event實例對象做爲參數。這個實例對象繼承了 StorageEvent 接口，有幾個特有的屬性，都是隻讀屬性。
StorageEvent.key：字符串，表示發生變更的鍵名。若是 storage 事件是由clear()方法引發，該屬性返回null。
StorageEvent.newValue：字符串，表示新的鍵值。若是 storage 事件是由clear()方法或刪除該鍵值對引起的，該屬性返回null。
Storage.oldValue：字符串，表示舊的鍵值。若是該鍵值對是新增的，該屬性返回null。
Storage.storageArea：對象，返回鍵值對所在的整個對象。也說是說，能夠從這個屬性上面拿到當前域名儲存的全部鍵值對。
Storage.url：字符串，表示原始觸發 storage 事件的那個網頁的網址。

function onStorageChange(e) {
  console.log(e.key);}
window.addEventListener('storage', onStorageChange);

它不在致使數據變化的當前頁面觸發，而是在同一個域名的其餘窗口觸發。也就是說，若是瀏覽器只打開一個窗口，可能觀察不到這個事件。好比同時打開多個窗口，當其中的一個窗口致使儲存的數據發生改變時，只有在其餘窗口才能觀察到監聽函數的執行。能夠經過這種機制，實現多個窗口之間的通訊。

例子

function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (localStorage.clickcount)
        {
            localStorage.clickcount=Number(localStorage.clickcount)+1;
        }
        else
        {
            localStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML=" 你已經點擊了按鈕 " + localStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="對不起，您的瀏覽器不支持 web 存儲。";
    }
}