Window.sessionStorage - Web API 接口參考 | MDN

參考: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);
相關文章
相關標籤/搜索