H5本地儲存：sessionStorage和localStorage

心葉發表於2019-02-16
H5Session

作者：心葉
時間：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：字串型別，表示觸發這個事件的頁面地址。

相關文章