From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/api/window/sessionstorage/index.html | 113 +++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 files/zh-cn/web/api/window/sessionstorage/index.html (limited to 'files/zh-cn/web/api/window/sessionstorage') diff --git a/files/zh-cn/web/api/window/sessionstorage/index.html b/files/zh-cn/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..d11bc0497a --- /dev/null +++ b/files/zh-cn/web/api/window/sessionstorage/index.html @@ -0,0 +1,113 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API + - Web Storage + - WindowSessionStorage + - sessionStorage + - 存储 + - 属性 +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

sessionStorage 属性允许你访问一个，对应当前源的 session {{domxref("Storage")}} 对象。它与 {{domxref("Window.localStorage", "localStorage")}} 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

+ + + +
+

应该注意，存储在sessionStorage或localStorage中的数据特定于页面的协议。也就
+ 是说http://example.com 与 https://example.com的sessionStorage相互隔离。

+ +

被存储的键值对总是以UTF-16 DOMString 的格式所存储，其使用两个字节来表示一个字符。对于对象、整数key值会自动转换成字符串形式。

+
+ +

语法

+ +
// 保存数据到 sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// 从 sessionStorage 获取数据
+let data = sessionStorage.getItem('key');
+
+// 从 sessionStorage 删除保存的数据
+sessionStorage.removeItem('key');
+
+// 从 sessionStorage 删除所有保存的数据
+sessionStorage.clear();
+
+
+ +

返回值

+ +

一个 {{domxref("Storage")}} 对象。

+ +

示例

+ +

下面的代码访问当前域名的 session {{domxref("Storage")}} 对象，并使用 {{domxref("Storage.setItem()")}} 访问往里面添加一个数据条目。

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

下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，因此写入的内容不会丢失。

+ +
// 获取文本输入框
+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);
+});
+
+ +
+

备注：完整的使用示例可以查看使用 Web Storage API一文。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}}
+ +

浏览器兼容性

+ +

{{Compat("api.Window.sessionStorage")}}
+ 各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 detailed rundown of all the storage capacities for various browsers。

+ +
+ +
+

Note: 从iOS 5.1之后，移动端的Safari将localStorage数据存储在cache文件中，在操作系统的要求下，会偶尔进行清除，特别是空间不足时。

+
+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf