blob: 696367e87280faa82e37a66e20443778082b4bdf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
---
title: Window.sessionStorage
slug: Web/API/Window/sessionStorage
tags:
- API
- Property
- Storage
- WindowSessionStorage
- localStorage
translation_of: Web/API/Window/sessionStorage
---
<p>{{APIRef()}}</p>
<p><code>sessionStorage</code> 屬性能讓開發人員訪問當前 origin 的 {{DOMxRef("Storage")}} 物件。<code>sessionStorage</code> 跟 {{DOMxRef("Window.localStorage", "localStorage")}} 很相似：唯一不同的地方是存放在 <code>localStorage</code> 的資料並沒有過期的時效；而存放在 <code>sessionStorage</code> 的資料則會在頁面 session 結束時清空。只要該頁面頁面(頁籤)沒被關閉或者有還原(restore)該頁面，資料就會保存。<strong>開啟新頁籤或視窗會產生一個新的sessionStorage</strong>，跟Session與Cookies的做法不大一樣。
</p>
<p>另應該注意：不論資料放在 <code>sessionStorage</code> 還是 <code>localStorage</code>，都被<strong>限制在該網站的規範內，其他網站無法存取</strong>。</p>
<h2 id="語法">語法</h2>
<pre class="brush: js">// 將資料存到sessionStorage
sessionStorage.setItem('key', 'value');
// 從sessionStorage取得之前存的資料
var data = sessionStorage.getItem('key');
// 從sessionStorage移除之前存的資料
sessionStorage.removeItem('key');
// 從sessionStorage移除之前存的所有資料
sessionStorage.clear();
</pre>
<h3 id="回傳值">回傳值</h3>
<p>一個 {{DOMxRef("Storage")}} 物件.</p>
<h2 id="範例">範例</h2>
<p>下面簡短的程式碼，訪問了當前域名下的 session {{DOMxRef("Storage")}} 物件，並使用 {{DOMxRef("Storage.setItem()")}} 添加了資料單元。</p>
<pre class="brush: js;">sessionStorage.setItem('myCat', 'Tom');</pre>
<p>以下提供的範例為將文字輸入元件的內容自動保存，如果瀏覽器不小心重新整理，在頁面恢復後，會自動將內容還原，不會造成尚未送出的資料被清空。</p>
<pre class="brush: js">// 取得我們要保留內容的text field元件
var field = document.getElementById("field");
// 檢查是否有之前的<strong>autosave</strong>的內容
// 這段程式碼會在瀏覽器進入該頁面時被執行
if (sessionStorage.getItem("autosave")) {
// 還原先前的內容到指定的text field
field.value = sessionStorage.getItem("autosave");
}
// 註冊事件監聽text field內容的變化
field.addEventListener("change", function() {
// 並儲存變化後的內容至sessionStorage的物件裡
sessionStorage.setItem("autosave", field.value);
});</pre>
<div class="note">
<p><strong>備註</strong>: 完整的範例可參考這篇文章: <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a>。</p>
</div>
<h2 id="規格">規格</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">規格</th>
<th scope="col">狀態</th>
<th scope="col">註解</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-sessionstorage', 'sessionStorage')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{Compat("api.Window.sessionStorage")}}</p>
<h2 id="相關內容">相關內容</h2>
<ul>
<li><a href="/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
<li>{{domxref("Window.localStorage")}}</li>
</ul>
|
