Window.sessionStorage

sessionStorage這個屬性讓開發人員將資料暫存在當下頁面(頁籤)的空間Storage物件裡。sessionStorage跟Window.localStorage很相似，唯一不同的地方是存放在localStorage的資料會永久保存，存放在sessionStorage的資料則會在頁面(頁籤)關閉時清空。只要該頁面頁面(頁籤)沒被關閉或者有還原(restore)該頁面，資料就會保存。開啟新頁籤或視窗會產生一個新的sessionStorage，跟Session與Cookies的做法不大一樣。

另外，應該注意一下不論資料放在sessionStorage或localStorage，都是限制在該網站的規範內，其他網站無法存取。

語法

// 將資料存到sessionStorage
sessionStorage.setItem('key', 'value');

// 從sessionStorage取得之前存的資料
var data = sessionStorage.getItem('key');

// 從sessionStorage移除之前存的資料
sessionStorage.removeItem('key');

// 從sessionStorage移除之前存的所有資料
sessionStorage.clear();

回傳值

一個 Storage 物件.

範例

下面簡短的程式碼提供了在該域名頁面下的session Storage 物件，並將一段文字存放到myCat裡。

sessionStorage.setItem('myCat', 'Tom');

以下提供的範例為將文字輸入元件的內容自動保存，如果瀏覽器不小心重新整理，在頁面恢復後，會自動將內容還原，不會造成尚未送出的資料被清空。

// 取得我們要保留內容的text field元件
var field = document.getElementById("field");
 
// 檢查是否有之前的autosave的內容
// 這段程式碼會在瀏覽器進入該頁面時被執行
if (sessionStorage.getItem("autosave")) {
  // 還原先前的內容到指定的text field
  field.value = sessionStorage.getItem("autosave");
}
 
// 註冊事件監聽text field內容的變化
field.addEventListener("change", function() {
  // 並儲存變化後的內容至sessionStorage的物件裡
  sessionStorage.setItem("autosave", field.value);
});

規格

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

所有瀏覽器的localStorage跟sessionStorage的存取空間大小不一樣，這邊提供一個測試的連結detailed rundown of all the storage capacities for various browsers。

相關內容

• Using the Web Storage API
• Window.localStorage