H5本地存儲：sessionStorage和localStorage

做者：心葉
時間：2018-05-01 18:30

H5提供了二種很是好用的本地存儲方法：sessionStorage和localStorage，下面分別介紹一下：

1.sessionStorage：保存的是一個會話的數據，也就是說只在一次會話中有效，關閉就會銷燬數據，不是持久的本地數據存儲，只是一個會話的存儲；

2.localStorage：本地數據持久化存儲，在操做上和第一種沒有什麼區別，只是存儲時間上不一樣。

第一步：基本操做。

1.把value存儲到key字段：.setItem( key, value)。

sessionStorage.setItem("key", "value");

localStorage.setItem("key", "value");

2.獲取指定key本地存儲的值：.getItem(key)。

var value=sessionStorage.getItem("key");

var value=localStorage.getItem("key");

3.刪除指定key本地存儲的值：.removeItem( key)。

sessionStorage.removeItem("key");

localStorage.removeItem("key");

4.清除全部的key/value：.clear()。

sessionStorage.clear();

localStorage.clear();

第二步：其它操做。

storage除了能夠用上面說到的方法獲取和存儲數據，還能夠和普通的對象同樣，使用點操做和[]來控制數據（下面以localStorage爲例子）：

var storage = window.localStorage;

storage.info='經過點設置數據';

//經過[]獲取數據
var infoValue=storage['info'];

能夠經過storage的key()和length實現數據的遍歷：

var storage = window.localStorage;

for (var i = 0, len = storage.length; i < len; i++) {

    var key = storage.key(i);
    
    var value = storage.getItem(key);
    
    console.log(key + "=" + value);

}

第三步：storage事件（針對localStorage）。

localStorage提供了一個事件storage，當鍵值改變或者clear的時候，就能夠觸發storage事件（註冊storage和改變值要在不跨域的狀況下存在於二個頁面），以下面的例子：

//頁面A.html裏面的js代碼（爲了簡化代碼，註冊事件沒有考慮兼容性）
window.addEventListener("storage", function (event) {

    alert(event.newValue);
    
});

//頁面B.html裏面的js代碼
localStorage.clear();

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

把頁面A.html和B.html放正同一個域名下的HTTP服務器裏，先打開A.html頁面，再打開B.html頁面，就能夠看見效果了。

上面A.html註冊事件的event對象一共有下面幾個屬性：

1.key：字符串類型，表示被修改，刪除或添加的條目的key值；

2.oldValue：表示以前的值，若是是添加一個條目就返回null；

3.newValue：表示如今的新值，若是是添加一個條目就返回null；

4.url/uri：字符串類型，表示觸發這個事件的頁面地址。