Window: sessionStorage 属性
只读的 sessionStorage 属性会访问当前 源 的会话 Storage 对象。sessionStorage 与 localStorage 类似；不同之处在于，localStorage 仅按源进行分区，而 sessionStorage 则按源和浏览器选项卡（顶级浏览上下文）进行分区。sessionStorage 中的数据仅在页面会话期间保留。
- 每当在浏览器中的特定选项卡中加载文档时，就会创建一个唯一的页面会话并分配给该特定选项卡。该页面会话只能在该特定选项卡中访问。主文档和所有嵌入的 浏览上下文（iframe）会按其源进行分组，并且每个源都可以访问其自己的独立存储区域。
- 如果页面有
opener，sessionStorage最初是打开它的sessionStorage对象的副本。但是，它们仍然是独立的，一个的更改不会影响另一个。要防止sessionStorage被复制，请使用可移除opener的技术之一（请参阅Window.opener）。 - 页面会话在选项卡或浏览器打开期间持续存在，并且在页面重新加载和恢复时会得到保留。
- 在新选项卡或窗口中打开页面会创建一个新的会话，其值与顶级浏览上下文的值相同，这与会话 cookie 的工作方式不同。
- 关闭选项卡/窗口将结束会话并清除
sessionStorage中的数据。
值
一个 Storage 对象，可用于访问当前源的会话存储空间。
异常
SecurityError-
在以下情况之一中抛出
- 源不是 有效的 scheme/host/port 组合。例如，如果源使用
file:或data:scheme，则可能发生这种情况。 - 请求违反了策略决定。例如，用户已将浏览器配置为阻止页面持久化数据。
请注意，如果用户阻止 cookie，浏览器可能会将其解释为阻止页面持久化数据的指令。
- 源不是 有效的 scheme/host/port 组合。例如，如果源使用
示例
基本用法
js
// Save data to sessionStorage
sessionStorage.setItem("key", "value");
// Get saved data from sessionStorage
let data = sessionStorage.getItem("key");
// Remove saved data from sessionStorage
sessionStorage.removeItem("key");
// Remove all saved data from sessionStorage
sessionStorage.clear();
刷新之间保存文本
以下示例会自动保存文本字段的内容，并在浏览器刷新时恢复文本字段内容，以免丢失任何输入。
js
// Get the text field that we're going to track
let field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", () => {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
注意： 有关完整示例，请参阅 使用 Web Storage API 文章。
规范
| 规范 |
|---|
| HTML # dom-sessionstorage-dev |
浏览器兼容性
加载中…