摘要：使用存儲本文由赤石俊哉翻譯整理，您可以將本文自由地用于學習交流。原文鏈接英文存儲提供了瀏覽器可以在本地安全存儲鍵值對的一個機能，它比更為直觀。你可以參考一下功能檢測簡報英文。使用在存儲做出改變時進行響應會在對象發生變化時進行相應。

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

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

存儲對象是一個簡單的鍵值存儲，它跟對象類似，但是它們在頁面讀取后依然完整。鍵和值總是字符串（注意，整型數據也會自動地轉為字符串，就像對象那樣）。你可以像訪問一個對象一樣來訪問這些值，或者使用方法：Storage.getItem()和Storage.setItem()。下面這三行都是設置了colorSetting記錄：

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

Note: 強烈推薦使用Web存儲API（setItem, getItem, removeItem, key, length）進行純對象的鍵值操作來防止可能出現的隱患。

兩種Web存儲中包含的機能如下:

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

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

這些機能可以通過Window.sessionStorage和Window.localStorage屬性（更準確的說，在支持的瀏覽器中，Window對象實現了WindowLocalStorage和WindowSessionStorage對象，他們是由localStorage和sessionStorage掛起的）——調用其中任何一個，都會創建一個Storage對象的實例，透過它，數據項目可以被設置，取回，和移除。每一個sessionStorage和localStorage的源都是用不同的存儲對象——它們是分辨運作和被控制的。

所以，第一次在文檔中調用localStorage后，它會返回一個Storage對象，調用sessionStorage之后，他又會返回另一個Storage對象。它們都可以用同一種方式進行操控，但是都是彼此獨立的。

為了能使用localStorage，我們應該先進行確認，當前的瀏覽器會話是否支持和允許使用它。

如果瀏覽器支持localStorage，在它的window對象中就會有一個屬性叫作localStorage。但是，由于種種原因，如果直接去斷定這個屬性是否存在可能會拋出異常。如果它確實存在，也沒有保障我們就一定可以使用它，因為很多瀏覽器支持在設定中禁用localStorage。舉個例子，那就是Safari，在隱私瀏覽模式下，他會給我們一個配額為0的空的localStorage對象，實際上就是使它無效化。我們在檢測的時候，也應該把這一點考慮進來。

下面是一個用于檢測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;
    }
}

你應該這樣使用它：

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

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

你可以參考一下localStorage功能檢測簡報（英文）。

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

當你選擇不同的選項，頁面會實時地更新，順帶一提，你的選項會被存儲到localStorage里存儲。所以當你離開頁面重新載入它的時候，你的選擇會被記住。

我們也提供了一個事件輸出頁面——如果你在另一個標簽頁中載入這個頁面，那么你在登錄頁面中做出的任何選擇之后，你會看到更新了的存儲信息會被顯示出來，因為StorageEvent被觸發了。

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

拿上面的例子來說，在main.js中，我們將會測試存儲對象是否已經被填入（也就是說頁面是否之前就已經載入過了）：

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

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

Note: 你也可以使用Storage.length來測試存儲對象是否為空。

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

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);
}

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

Storage.setItem()可以用于創建也可以用于更新數據的值。它需要兩個參數——需要修改或者創建的鍵名，需要存儲的值。

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()方法在本地存儲中設置了三個項目——背景顏色，字體，圖片路徑。然后運行setStyles()方法更新頁面樣式，等等。

我們也在每一個表單元素上包含了一個onchange句柄，當表單的值發生改變時，數據和樣式會立刻進行更新。

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

StorageEvent會在Storage對象發生變化時進行相應。它不能很好地在發生改變的頁面上進行相應，但是在同一個域名的頁面之間同步任何變化時，這是會是一個不錯的方法。在不同的域名中無法訪問相同的存儲對象。

在事件頁面（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;
});

這里我們添加了一個事件監聽器給window對象，當當前源的存儲對象發生改變時引發。就如你所能看見的，這個事件的參數包含了很多有用的信息——發生變化的鍵名，舊值，新值，發生變化的文檔的URL，以及存儲對象其自身。

Web存儲也提供了一對簡單的方法來移除數據。在我們的demo中沒有使用這些，把它們加到我們的項目里面來也不難。

Storage.removeItem()使用一個簡單的參數（你想要移除的數據項目的鍵）來將它從域名下的存儲對象中移除它。

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

當一個存儲區域（本地存儲和會話存儲）被修改時，storage事件會被觸發。