站長資訊網本篇文章給大家帶來的內容是關于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名
