大神為您詳解localstorge,seesionstorage

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于localstorge,seesionstorage，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。【推進(jìn)教程：Html5教程】

sessionStorage屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 localStorage 里面存儲的數(shù)據(jù)沒有過期時間設(shè)置，而存儲在 sessionStorage里面的數(shù)據(jù)在頁面會話結(jié)束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會保持原來的頁面會話。在新標(biāo)簽或窗口打開一個頁面會初始化一個新的會話，這點和 session cookies 的運行方式不同。

只讀的localStorage 允許你訪問一個Document 的遠(yuǎn)端（origin）對象 Storage；數(shù)據(jù)存儲為跨瀏覽器會話。 localStorage 類似于sessionStorage。區(qū)別在于，數(shù)據(jù)存儲在 localStorage 是無期限的，而當(dāng)頁面會話結(jié)束——也就是說當(dāng)頁面被關(guān)閉時，數(shù)據(jù)存儲在sessionStorage 會被清除 。

簡單來看，localStorage是一個瀏覽器持久化存儲方案，而sessionStorage與session不同的是它只存在于一個頁面之中，新開頁面的話sessionStorage會被重置。 應(yīng)注意無論數(shù)據(jù)存儲在 localStorage 還是 sessionStorage ，它們都特定于頁面的協(xié)議

基本用法

首先我們來看一下sessionStorage的操作

1.保存數(shù)據(jù)到sessionStorage sessionStorage.setItem('key', 'value');

2.從sessionStorage獲取數(shù)據(jù)

var sessionData = sessionStorage.getItem('key');

3.從sessionStorage刪除保存的數(shù)據(jù)

sessionStorage.removeItem('key');

4.移除所有

sessionStorage.clear();

相同的 localStorage也有著類似的操作

1.保存數(shù)據(jù)

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

2.獲取數(shù)據(jù)

let cat = localStorage.getItem(`key`);

3.刪除單個數(shù)據(jù)

localStorage.removeItem(`key`);

4.移除所有

localStorage.clear();

可以通過 localStorage.length 來獲取localStorage中鍵值對的數(shù)量，同樣的也可以通過 localStorage.key（） 方法來遍歷 localStorage 存儲的鍵值。

storage 事件

當(dāng)存儲的數(shù)據(jù)發(fā)生變化時，會觸發(fā) storage 事件。但要注意的是它不同于click類的事件會事件捕獲和冒泡，storage 事件更像是一個通知，不可取消。觸發(fā)這個事件會調(diào)用同域下其他窗口的storage事件，不過觸發(fā)storage的窗口（即當(dāng)前窗口）不觸發(fā)這個事件。storage 的 event 對象的常用屬性如下 （當(dāng)前窗口不觸發(fā)，其他窗口會觸發(fā)） 。

changeEvent的常用屬性如下：

oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。 newValue：更新后的值。如果該鍵被刪除，則這個屬性為null。 url：原始觸發(fā)storage事件的那個網(wǎng)頁的網(wǎng)址。 key：存儲store的key名