翻譯不完整。請協助 翻譯此英文文件

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);
});

備註: 完整的範例可參考這篇文章: Using the Web Storage API

規格

Specification Status Comment
HTML Living Standard
The definition of 'sessionStorage' in that specification.
Living Standard  

瀏覽器相容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 (Yes) 3.5 8 10.50 4
sessionStorage 5 (Yes) 2 8 10.50 4
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 (Yes) ? 8 11 iOS 3.2

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

備註: 自iOS 5.1開始, 行動版的Safari瀏覽器 將localStorage與sessionStorage資料存在快取資料夾,一般情況下,會在iOS裝置可用空間不足時,不定期清除localStorage與sessionStorage。

相關內容

文件標籤與貢獻者

 此頁面的貢獻者: EyiLee, EricPing
 最近更新: EyiLee,