1、概述

localStorage和sessionStorage統(tǒng)稱為Web Storage，它使得網(wǎng)頁(yè)可以在瀏覽器端儲(chǔ)存數(shù)據(jù)。

sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會(huì)話，當(dāng)會(huì)話結(jié)束（通常是該窗口關(guān)閉），數(shù)據(jù)被清空；localStorage保存的數(shù)據(jù)長(zhǎng)期存在，下一次訪問該網(wǎng)站的時(shí)候，網(wǎng)頁(yè)可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長(zhǎng)短不同，這兩個(gè)對(duì)象的屬性和方法完全一樣。

它們很像cookie機(jī)制的強(qiáng)化版，能夠動(dòng)用大得多的存儲(chǔ)空間。目前，每個(gè)域名的存儲(chǔ)上限視瀏覽器而定，Chrome是2.5MB，F(xiàn)irefox和Opera是5MB，IE是10MB。其中，F(xiàn)irefox的存儲(chǔ)存空間由一級(jí)域名決定，而其他瀏覽器沒有這個(gè)限制。也就是說，在Firefox中，a.example.com和b.example共享5MB的存儲(chǔ)空間。另外，與cookie一樣，它們也受同域限制。某個(gè)網(wǎng)頁(yè)存入的數(shù)據(jù)，只有同域下的網(wǎng)頁(yè)才能讀取。

通過檢查window對(duì)象是否包含sessionStorage和localStorage屬性，可以確定瀏覽器是否支持這兩個(gè)對(duì)象。

function checkStorageSupport() {      var result = {};      //sessionStorage      if (window.sessionStorage) {          result.sessionStorage = true;      } else {          result.sessionStorage = false;      }    //localStorage      if (window.localStorage) {          result.localStorage = true;      } else {          result.localStorage = false;      }    return result;    }

2、操作方法

2.1 存入/讀取數(shù)據(jù)

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

存入數(shù)據(jù)用setItem方法。它接受兩個(gè)參數(shù)，第一個(gè)是鍵名，第二個(gè)是保存的數(shù)據(jù)。

sessionStorage.setItem('key', 'value');    localStorage.setTime('key', 'value');

讀取數(shù)據(jù)使用getItem方法。它只有一個(gè)參數(shù)，就是鍵名。

var valueSession = sessionStorage.getItem('key');var valueLocal = localStorage.getItem('key');

2.2 清除數(shù)據(jù)

removeItem方法用于清除某個(gè)鍵名對(duì)應(yīng)的數(shù)據(jù)。

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

clear方法用于清除所有保存的數(shù)據(jù)。

sessionStorage.clear();    localStorage.clear();

2.3 遍歷操作

利用length屬性和key方法，可以遍歷所有的鍵。

for (var i = 0; i < localStorage.length; i++) {      console.log(localStorage.key(i));  }

其中的key方法，根據(jù)位置（從0開始）獲得鍵值。

localStorage.key(1);

3、storage事件

當(dāng)儲(chǔ)存的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā)storage事件。我們可以指定這個(gè)事件的回調(diào)函數(shù)。

window.addEventListener('storage', onStorageChange);

回調(diào)函數(shù)接受一個(gè)event對(duì)象作為參數(shù)。這個(gè)event對(duì)象的key屬性，保存發(fā)生變化的鍵名。

function onStorageChange(e) {      console.log(e.key);  }

除了key屬性，event對(duì)象的屬性還有三個(gè)：

oldValue：更新前的值。如果該鍵為新增加，則這個(gè)屬性為null。

newValue：更新后的值。如果該鍵被刪除，則這個(gè)屬性為null。

url：原始觸發(fā)storage事件的那個(gè)網(wǎng)頁(yè)的網(wǎng)址。

值得特別注意的是，該事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁(yè)面觸發(fā)。如果瀏覽器同時(shí)打開一個(gè)域名下面的多個(gè)頁(yè)面，當(dāng)其中一個(gè)頁(yè)面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)，其他所有頁(yè)面的storage事件會(huì)被觸發(fā)，而原始頁(yè)面并不觸發(fā)storage事件?？梢酝ㄟ^這種機(jī)制，實(shí)現(xiàn)多個(gè)窗口之間的通信。所有瀏覽器之中，只有IE瀏覽器除外，它會(huì)在所有頁(yè)面觸發(fā)storage事件。