blob: d11bc0497af0da8af988cbec00f529dd16f222b8 (
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
title: Window.sessionStorage
slug: Web/API/Window/sessionStorage
tags:
- API
- Web Storage
- WindowSessionStorage
- sessionStorage
- 存储
- 属性
translation_of: Web/API/Window/sessionStorage
---
<p>{{APIRef()}}</p>
<p><code>sessionStorage</code> 属性允许你访问一个，对应当前源的 session {{domxref("Storage")}} 对象。它与 {{domxref("Window.localStorage", "localStorage")}} 相似，不同之处在于 <code>localStorage</code> 里面存储的数据没有过期时间设置，而存储在 <code>sessionStorage</code> 里面的数据在页面会话结束时会被清除。</p>
<ul>
<li>页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。</li>
<li><strong>在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，</strong>这点和 session cookies 的运行方式不同。</li>
<li>打开多个相同的URL的Tabs页面，会创建各自的<code>sessionStorage</code>。</li>
<li>关闭对应浏览器窗口（Window）/ tab，会清除对应的<code>sessionStorage</code>。 </li>
</ul>
<div class="blockIndicator note">
<p>应该注意，存储在sessionStorage或localStorage中的数据<strong>特定于页面的协议</strong>。也就<br>
是说<code><strong>http</strong>://example.com</code> 与 <code><strong>https</strong>://example.com</code>的sessionStorage相互隔离。</p>
<p>被存储的键值对总是以UTF-16 <a href="/zh-CN/docs/Web/API/DOMString">DOMString</a> 的格式所存储，其使用两个字节来表示一个字符。对于对象、整数key值会自动转换成字符串形式。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="brush: js notranslate">// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let 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 notranslate">sessionStorage.setItem('myCat', 'Tom');</pre>
<p>下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，因此写入的内容不会丢失。</p>
<pre class="brush: js notranslate">// 获取文本输入框
let 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);
});
</pre>
<div class="note">
<p><strong>备注：</strong>完整的使用示例可以查看<a href="/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">使用 Web Storage API</a>一文。</p>
</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
<td>{{Spec2('Web Storage')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.Window.sessionStorage")}}<br>
<span>各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 </span><a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a><span>。</span></p>
<div id="compat-mobile"></div>
<div class="note">
<p><strong>Note: </strong>从iOS 5.1之后，移动端的Safari将localStorage数据存储在cache文件中，在操作系统的要求下，会偶尔进行清除，特别是空间不足时。</p>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">使用 Web Storage API</a></li>
<li>{{domxref("Window.localStorage")}}</li>
</ul>
|
