摘要：使用存儲(chǔ)本文由赤石俊哉翻譯整理，您可以將本文自由地用于學(xué)習(xí)交流。原文鏈接英文存儲(chǔ)提供了瀏覽器可以在本地安全存儲(chǔ)鍵值對(duì)的一個(gè)機(jī)能，它比更為直觀。你可以參考一下功能檢測(cè)簡報(bào)英文。使用在存儲(chǔ)做出改變時(shí)進(jìn)行響應(yīng)會(huì)在對(duì)象發(fā)生變化時(shí)進(jìn)行相應(yīng)。

TODO:本文由 赤石俊哉 翻譯整理，您可以將本文自由地用于學(xué)習(xí)交流。如需用于其他用途請(qǐng)征得作者的同意。 
原文鏈接：Using the Web Storage API - Mozilla Developer Network (英文)

Web存儲(chǔ)API提供了瀏覽器可以在本地安全存儲(chǔ)鍵值對(duì)的一個(gè)機(jī)能，它比cookies更為直觀。這篇文章將會(huì)簡單闡述一下如何來簡單地使用這種技術(shù)。

存儲(chǔ)對(duì)象是一個(gè)簡單的鍵值存儲(chǔ)，它跟對(duì)象類似，但是它們?cè)陧撁孀x取后依然完整。鍵和值總是字符串（注意，整型數(shù)據(jù)也會(huì)自動(dòng)地轉(zhuǎn)為字符串，就像對(duì)象那樣）。你可以像訪問一個(gè)對(duì)象一樣來訪問這些值，或者使用方法：Storage.getItem()和Storage.setItem()。下面這三行都是設(shè)置了colorSetting記錄：

localStorage.colorSetting = "#a4509b";
localStorage["colorSetting"] = "#a4509b";
localStorage.setItem("colorSetting", "#a4509b");

Note: 強(qiáng)烈推薦使用Web存儲(chǔ)API（setItem, getItem, removeItem, key, length）進(jìn)行純對(duì)象的鍵值操作來防止可能出現(xiàn)的隱患。

兩種Web存儲(chǔ)中包含的機(jī)能如下:

sessionStorage 為每一個(gè)頁面訪問session期間維持一個(gè)多帶帶的存儲(chǔ)空間（只要瀏覽器打開就一直維持，包括頁面重載和重新存儲(chǔ)）。

localStorage 做同樣的事情，只不過在瀏覽器被關(guān)閉再打開后仍然維持著。

這些機(jī)能可以通過Window.sessionStorage和Window.localStorage屬性（更準(zhǔn)確的說，在支持的瀏覽器中，Window對(duì)象實(shí)現(xiàn)了WindowLocalStorage和WindowSessionStorage對(duì)象，他們是由localStorage和sessionStorage掛起的）——調(diào)用其中任何一個(gè)，都會(huì)創(chuàng)建一個(gè)Storage對(duì)象的實(shí)例，透過它，數(shù)據(jù)項(xiàng)目可以被設(shè)置，取回，和移除。每一個(gè)sessionStorage和localStorage的源都是用不同的存儲(chǔ)對(duì)象——它們是分辨運(yùn)作和被控制的。

所以，第一次在文檔中調(diào)用localStorage后，它會(huì)返回一個(gè)Storage對(duì)象，調(diào)用sessionStorage之后，他又會(huì)返回另一個(gè)Storage對(duì)象。它們都可以用同一種方式進(jìn)行操控，但是都是彼此獨(dú)立的。

為了能使用localStorage，我們應(yīng)該先進(jìn)行確認(rèn)，當(dāng)前的瀏覽器會(huì)話是否支持和允許使用它。

如果瀏覽器支持localStorage，在它的window對(duì)象中就會(huì)有一個(gè)屬性叫作localStorage。但是，由于種種原因，如果直接去斷定這個(gè)屬性是否存在可能會(huì)拋出異常。如果它確實(shí)存在，也沒有保障我們就一定可以使用它，因?yàn)楹芏酁g覽器支持在設(shè)定中禁用localStorage。舉個(gè)例子，那就是Safari，在隱私瀏覽模式下，他會(huì)給我們一個(gè)配額為0的空的localStorage對(duì)象，實(shí)際上就是使它無效化。我們?cè)跈z測(cè)的時(shí)候，也應(yīng)該把這一點(diǎn)考慮進(jìn)來。

下面是一個(gè)用于檢測(cè)localStorage是否支持以及可用的方法：

function storageAvailable(type) {
    try {
        var storage = window[type],
            x = "__storage_test__";
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return false;
    }
}

你應(yīng)該這樣使用它：

if (storageAvailable("localStorage")) {
    // Yippee! We can use localStorage awesomeness
}
else {
    // Too bad, no localStorage for us
}

你可以用相同的辦法來測(cè)試sessionStorage：storageAvailable("sessionStorage")。

你可以參考一下localStorage功能檢測(cè)簡報(bào)（英文）。

為了舉例說明一些典型的Web存儲(chǔ)用例，我們創(chuàng)建了一個(gè)簡單的例子，叫它Web Storage Demo吧。登錄頁面提供了一個(gè)控件來自定義顏色，字體，和裝飾圖片：

當(dāng)你選擇不同的選項(xiàng)，頁面會(huì)實(shí)時(shí)地更新，順帶一提，你的選項(xiàng)會(huì)被存儲(chǔ)到localStorage里存儲(chǔ)。所以當(dāng)你離開頁面重新載入它的時(shí)候，你的選擇會(huì)被記住。

我們也提供了一個(gè)事件輸出頁面——如果你在另一個(gè)標(biāo)簽頁中載入這個(gè)頁面，那么你在登錄頁面中做出的任何選擇之后，你會(huì)看到更新了的存儲(chǔ)信息會(huì)被顯示出來，因?yàn)?b>StorageEvent被觸發(fā)了。

Note: 你可以從這里查看源代碼。

拿上面的例子來說，在main.js中，我們將會(huì)測(cè)試存儲(chǔ)對(duì)象是否已經(jīng)被填入（也就是說頁面是否之前就已經(jīng)載入過了）：

if(!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

Storage.getItem()方法被用于從存儲(chǔ)中獲取數(shù)據(jù)項(xiàng)目。在這個(gè)例子中，我們測(cè)試bgcolor項(xiàng)目是否存在。如果不存在，我們運(yùn)行populateStorage()來將已經(jīng)存在的自定義值存入存儲(chǔ)。如果已經(jīng)有數(shù)據(jù)了，我們運(yùn)行setStyle()以使用存儲(chǔ)的值來更新頁面的樣式。

Note: 你也可以使用Storage.length來測(cè)試存儲(chǔ)對(duì)象是否為空。

就像之前我們所描述的，數(shù)據(jù)可以從存儲(chǔ)中使用Storage.getItem()來獲取。這個(gè)方法使用鍵來做參數(shù)，它會(huì)返回相應(yīng)的數(shù)據(jù)的值。舉個(gè)例子：

function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}

在這里，前三行從本地存儲(chǔ)中取出數(shù)據(jù)，接下來我們使用這些值設(shè)置顯示的表單元素。所以當(dāng)我們重新讀取頁面的時(shí)候，它們會(huì)保持同步。最后，我們更新了頁面上的樣式和裝飾圖片，所以你的自定義數(shù)值都在重載頁面之后重現(xiàn)了。

Storage.setItem()可以用于創(chuàng)建也可以用于更新數(shù)據(jù)的值。它需要兩個(gè)參數(shù)——需要修改或者創(chuàng)建的鍵名，需要存儲(chǔ)的值。

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

populateStorage()方法在本地存儲(chǔ)中設(shè)置了三個(gè)項(xiàng)目——背景顏色，字體，圖片路徑。然后運(yùn)行setStyles()方法更新頁面樣式，等等。

我們也在每一個(gè)表單元素上包含了一個(gè)onchange句柄，當(dāng)表單的值發(fā)生改變時(shí)，數(shù)據(jù)和樣式會(huì)立刻進(jìn)行更新。

bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;

StorageEvent會(huì)在Storage對(duì)象發(fā)生變化時(shí)進(jìn)行相應(yīng)。它不能很好地在發(fā)生改變的頁面上進(jìn)行相應(yīng)，但是在同一個(gè)域名的頁面之間同步任何變化時(shí)，這是會(huì)是一個(gè)不錯(cuò)的方法。在不同的域名中無法訪問相同的存儲(chǔ)對(duì)象。

在事件頁面（events.js）中，只有如下的代碼:

window.addEventListener("storage", function(e) {  
  document.querySelector(".my-key").textContent = e.key;
  document.querySelector(".my-old").textContent = e.oldValue;
  document.querySelector(".my-new").textContent = e.newValue;
  document.querySelector(".my-url").textContent = e.url;
  document.querySelector(".my-storage").textContent = e.storageArea;
});

這里我們添加了一個(gè)事件監(jiān)聽器給window對(duì)象，當(dāng)當(dāng)前源的存儲(chǔ)對(duì)象發(fā)生改變時(shí)引發(fā)。就如你所能看見的，這個(gè)事件的參數(shù)包含了很多有用的信息——發(fā)生變化的鍵名，舊值，新值，發(fā)生變化的文檔的URL，以及存儲(chǔ)對(duì)象其自身。

Web存儲(chǔ)也提供了一對(duì)簡單的方法來移除數(shù)據(jù)。在我們的demo中沒有使用這些，把它們加到我們的項(xiàng)目里面來也不難。

Storage.removeItem()使用一個(gè)簡單的參數(shù)（你想要移除的數(shù)據(jù)項(xiàng)目的鍵）來將它從域名下的存儲(chǔ)對(duì)象中移除它。

Storage.clear()是一個(gè)無參方法，它會(huì)清空域名下所有的存儲(chǔ)對(duì)象。

當(dāng)一個(gè)存儲(chǔ)區(qū)域（本地存儲(chǔ)和會(huì)話存儲(chǔ)）被修改時(shí)，storage事件會(huì)被觸發(fā)。