參考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStoragejavascript
sessionStorage
屬性容許你訪問一個 session Storage
對象。它與 localStorage
類似,不一樣之處在於 localStorage 裏面存儲的數據沒有過時時間設置,而存儲在 sessionStorage 裏面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持,而且從新加載或恢復頁面仍會保持原來的頁面會話。在新標籤或窗口打開一個頁面時會在頂級瀏覽上下文中初始化一個新的會話,這點和 session cookies 的運行方式不一樣。java
應該注意,存儲在sessionStorage或localStorage中的數據特定於該頁面的協議。瀏覽器
// 保存數據到 sessionStorage sessionStorage.setItem('key', 'value'); // 從 sessionStorage 獲取數據 let data = sessionStorage.getItem('key'); // 從 sessionStorage 刪除保存的數據 sessionStorage.removeItem('key'); // 從 sessionStorage 刪除全部保存的數據 sessionStorage.clear();
一個 Storage
對象。cookie
下面的代碼訪問當前域名的 session Storage
對象,並使用 Storage.setItem()
訪問往裏面添加一個數據條目。session
sessionStorage.setItem('myCat', 'Tom');
下面的示例會自動保存一個文本輸入框的內容,若是瀏覽器因偶然因素被刷新了,文本輸入框裏面的內容會被恢復,所以寫入的內容不會丟失。spa
// 獲取文本輸入框 var field = document.getElementById("field"); // 檢測是否存在 autosave 鍵值 // (這個會在頁面偶然被刷新的狀況下存在) if (sessionStorage.getItem("autosave")) { // 恢復文本輸入框的內容 field.value = sessionStorage.getItem("autosave"); } // 監聽文本輸入框的 change 事件 field.addEventListener("change", function() { // 保存結果到 sessionStorage 對象中 sessionStorage.setItem("autosave", field.value);