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

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

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

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

基本用法

首先我們來(lái)看一下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.刪除單個(gè)數(shù)據(jù)

localStorage.removeItem(`key`);

4.移除所有

localStorage.clear();

可以通過(guò) localStorage.length 來(lái)獲取localStorage中鍵值對(duì)的數(shù)量，同樣的也可以通過(guò) localStorage.key（） 方法來(lái)遍歷 localStorage 存儲(chǔ)的鍵值。

storage 事件

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

changeEvent的常用屬性如下：

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