Window: sessionStorage 属性

只读的 sessionStorage 属性访问当前 来源 的会话 Storage 对象。sessionStorage 与 localStorage 类似；不同之处在于，虽然 localStorage 中的数据不会过期，但 sessionStorage 中的数据会在页面会话结束时被清除。

  • 每当在浏览器中的特定选项卡中加载文档时，就会创建一个唯一的页面会话并将其分配给该特定选项卡。该页面会话仅对该特定选项卡有效。
  • 页面会话只要选项卡或浏览器处于打开状态，就会持续存在，并在页面重新加载和恢复后继续存在。
  • 在新的选项卡或窗口中打开页面会创建一个新的会话，其值与顶级浏览上下文不同，这与会话 Cookie 的工作方式不同。
  • 在多个选项卡/窗口中打开同一个 URL 会为每个选项卡/窗口创建 sessionStorage。
  • 复制选项卡会将选项卡的 sessionStorage 复制到新选项卡中。
  • 关闭选项卡/窗口会结束会话并清除 sessionStorage 中的对象。

存储在 sessionStorage 中的数据 特定于页面的协议。特别是，通过 HTTP 访问的网站上的脚本存储的数据（例如，http://example.com/）将被放入与通过 HTTPS 访问的相同网站的不同 sessionStorage 对象中（例如，https://example.com/）。

键和值 始终 采用 UTF-16 字符串格式，每字符使用两个字节。与对象一样，整数键会自动转换为字符串。

值

一个 Storage 对象，可用于访问当前来源的会话存储空间。

异常

SecurityError

在以下情况下之一抛出

  • 来源不是 有效的方案/主机/端口元组。例如，如果来源使用 file: 或 data: 方案，则可能会发生这种情况。
  • 请求违反了策略决定。例如，用户已将浏览器配置为阻止页面持久化数据。

请注意，如果用户阻止 Cookie，浏览器可能会将此解释为阻止页面持久化数据的指令。

示例

基本用法

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 存储 API 文章。

规范

规范
HTML 标准
# dom-sessionstorage-dev

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅