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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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