使用Web存儲API存取本地數據

使用Web存儲API

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，咱們應該先進行確認，當前的瀏覽器會話是否支持和容許使用它。

測試支持和可用性

若是瀏覽器支持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在存儲作出改變時進行響應

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()是一個無參方法，它會清空域名下全部的存儲對象。

瀏覽器兼容性

桌面

特 性	Chrome	Firefox(Gecko)	Internet Explorer	Opera	Safari(Webkit)
localStorage	4	3.5	8	10.50	4
sessionStorage	5	2	8	10.50	4

移動

特 性	Android	Firefox Mobile(Gecko)	IE Phone	Opera Mobile	Safari Mobile
基礎支持	2.1	?	8	11	iOS 3.2

Storage 事件

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

通用信息

規範	Web Storage
接口	StorageEvent
冒泡	否
可取消	否
目標	DefaultView(<window>)
默認動做	無

屬性

屬性	類型	描述
target readonly	EventTarget	事件的目標（DOM樹中最頂層的目標）
type readonly	DOMString	事件的類型
bubbles readonly	Boolean	事件是否冒泡（bubbles）
cancelable readonly	Boolean	事件是否能夠取消
key readonly	DOMString(string)	被修改的鍵名
oldValue readonly	DOMString(string)	舊的值
newValue readonly	DOMString(string)	新的值
url readonly	DOMString(string)	更新該鍵名的文檔的地址
storageArea readonly	Storage	被影響的存儲對象