摘要：接口用于腳本在瀏覽器保存數(shù)據(jù)。保存的數(shù)據(jù)都以鍵值對的形式存在。所有的數(shù)據(jù)都是以文本格式保存。事件接口儲存的數(shù)據(jù)發(fā)生變化時，會觸發(fā)事件，可以指定這個事件的監(jiān)聽函數(shù)。字符串，表示發(fā)生變動的鍵名。對象，返回鍵值對所在的整個對象。

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

sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會話（session），當(dāng)會話結(jié)束（通常是窗口關(guān)閉），數(shù)據(jù)被清空；
localStorage保存的數(shù)據(jù)長期存在，下一次訪問該網(wǎng)站的時候，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。

若用戶禁用第三方cookie，那么將不允許來自第三方IFrames對Web Storage的訪問。（從Firefox 43版本開始實(shí)行）
本地存儲不同于mozStorage（Mozilla"s XPCOM interfaces to SQLite）或Session store API（an XPCOM storage utility for use by extensions）。

保存的數(shù)據(jù)都以“鍵值對”的形式存在。也就是說，每一項(xiàng)數(shù)據(jù)都有一個鍵名和對應(yīng)的值。所有的數(shù)據(jù)都是以文本格式保存。

每個域名的存儲上限視瀏覽器而定，Chrome 是 2.5MB，F(xiàn)irefox 和 Opera 是 5MB，IE 是 10MB。Firefox 中，a.example.com和b.example.com共享 5MB 的存儲空間。與 Cookie 一樣，它們也受同域限制。某個網(wǎng)頁存入的數(shù)據(jù)，只有同域下的網(wǎng)頁才能讀取，如果跨域操作會報(bào)錯。

Storage 接口只有一個屬性。
Storage.length：返回保存的數(shù)據(jù)項(xiàng)個數(shù)。

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

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

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

Storage.setItem()兩個參數(shù)都是字符串。如果不是字符串，會自動轉(zhuǎn)成字符串，再存入瀏覽器。

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

如果儲存空間已滿，該方法會拋錯。

直接賦值也是可以的：

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

Storage.getItem()方法用于讀取數(shù)據(jù)。它只有一個參數(shù)，就是鍵名。如果鍵名不存在，該方法返回null。

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

鍵名應(yīng)該是一個字符串

Storage.removeItem()方法用于清除某個鍵名對應(yīng)的鍵值。它接受鍵名作為參數(shù)，如果鍵名不存在，該方法不會做任何事情。

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

Storage.clear()方法用于清除所有保存的數(shù)據(jù)。該方法的返回值是undefined。

window.sessionStorage.clear()

Storage.key()接受一個整數(shù)作為參數(shù)（從零開始），返回該位置對應(yīng)的鍵值。

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

//結(jié)合使用Storage.length屬性和Storage.key()方法，可以遍歷所有的鍵。
for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));}

Storage 接口儲存的數(shù)據(jù)發(fā)生變化時，會觸發(fā) storage 事件，可以指定這個事件的監(jiān)聽函數(shù)。

window.addEventListener("storage", onStorageChange);

監(jiān)聽函數(shù)接受一個event實(shí)例對象作為參數(shù)。這個實(shí)例對象繼承了 StorageEvent 接口，有幾個特有的屬性，都是只讀屬性。
StorageEvent.key：字符串，表示發(fā)生變動的鍵名。如果 storage 事件是由clear()方法引起，該屬性返回null。
StorageEvent.newValue：字符串，表示新的鍵值。如果 storage 事件是由clear()方法或刪除該鍵值對引發(fā)的，該屬性返回null。
Storage.oldValue：字符串，表示舊的鍵值。如果該鍵值對是新增的，該屬性返回null。
Storage.storageArea：對象，返回鍵值對所在的整個對象。也說是說，可以從這個屬性上面拿到當(dāng)前域名儲存的所有鍵值對。
Storage.url：字符串，表示原始觸發(fā) storage 事件的那個網(wǎng)頁的網(wǎng)址。

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

它不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)，而是在同一個域名的其他窗口觸發(fā)。也就是說，如果瀏覽器只打開一個窗口，可能觀察不到這個事件。比如同時打開多個窗口，當(dāng)其中的一個窗口導(dǎo)致儲存的數(shù)據(jù)發(fā)生改變時，只有在其他窗口才能觀察到監(jiān)聽函數(shù)的執(zhí)行?？梢酝ㄟ^這種機(jī)制，實(shí)現(xiàn)多個窗口之間的通信。

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