大神為您詳解localstorge,seesionstorage

這篇文章帶給大家的內容是關於localstorge,seesionstorage，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。 【推進教學：Html5教學】

sessionStorage屬性允許你存取一個 session Storage 物件。它與 localStorage 相似，不同之處在於 localStorage 裡面儲存的資料沒有過期時間設置，而儲存在 sessionStorage裡面的資料在頁面會話結束時會被清除。頁面會話在瀏覽器開啟期間一直保持，並且重新載入或恢復頁面仍會保持原來的頁面會話。在新標籤或視窗開啟一個頁面會初始化一個新的會話，這點和 session cookies 的運作方式不同。

只讀的localStorage 允許你存取一個Document 的遠端（origin）物件 Storage；資料儲存為跨瀏覽器會話。 localStorage 類似sessionStorage。差別在於，資料儲存在 localStorage 是無期限的，而當頁面會話結束－也就是說當頁面被關閉時，資料儲存在sessionStorage 會被清除 。

簡單來看，localStorage是一個瀏覽器持久化儲存方案，而sessionStorage與session不同的是它只存在於一個頁面之中，新開頁面的話sessionStorage會被重置。應注意無論資料儲存在localStorage 或sessionStorage ，它們都特定於頁面的協議

基本用法

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

#1.保存資料到sessionStorage sessionStorage.setItem('key', 'value');

2.從sessionStorage取得資料

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

3.從sessionStorage刪除已儲存的資料

sessionStorage.removeItem('key');

4.移除所有

sessionStorage.clear();

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

#1.儲存資料

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

2.取得資料

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

3.刪除單個資料

localStorage.removeItem(`key`);

4.移除所有

localStorage.clear();

可以透過localStorage.length 來取得localStorage中鍵值對的數量，同樣的也可以透過localStorage.key（） 方法來遍歷localStorage 存儲的鍵值。

storage 事件

當儲存的資料發生變化時，會觸發 storage 事件。但要注意的是它不同於click類別的事件會事件捕獲和冒泡，storage 事件更像是一個通知，不可取消。觸發這個事件會呼叫同域下其他視窗的storage事件，不過觸發storage的視窗（即目前視窗）不會觸發這個事件。 storage 的 event 物件的常用屬性如下 （目前視窗不觸發，其他視窗會觸發） 。

changeEvent的常用屬性如下：

oldValue：更新前的值。如果该键为新增加，则这个属性为null。
newValue：更新后的值。如果该键被删除，则这个属性为null。
url：原始触发storage事件的那个网页的网址。
key：存储store的key名

以上是大神為您詳解localstorge,seesionstorage的詳細內容。更多資訊請關注PHP中文網其他相關文章！