H5本地儲存:sessionStorage和localStorage

心葉發表於2019-02-16

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

相關文章