前端Wiki/HTML5/深入/Web Storage

sessionStorage

sessionStorage 与 localStorage 的 API 完全一致（同样四个方法），唯一区别是生命周期：数据绑定在"当前标签页的本次会话"——关闭标签页即清空，刷新页面还在，但新开一个相同页面标签，两边数据互不相通。

这个特性决定了它的适用场景都是"临时态"：多步表单的中间数据（第三步失败回到第二步，前面填的不丢）；本次访问的临时筛选条件；页面刷新前暂存状态防丢失。而"记住登录状态""用户主题偏好"这类要跨会话的数据，必须用 localStorage。

选择口诀：想"下次还认得"用 localStorage，想"关了就忘"用 sessionStorage。两者都只存字符串、都按源隔离，安全属性一致。

本节要点sessionStorage = 标签页级会话存储，关标签页即清空、刷新保留、跨标签页隔离；适合多步表单、临时状态；跨会话数据仍用 localStorage。

JavaScript

// API 与 localStorage 完全相同，生命周期不同
sessionStorage.setItem('step', '2');
sessionStorage.setItem('draft', JSON.stringify({
  title: '未命名草稿',
  body: '写了一半的内容……'
}));

// 刷新页面后依然能读到
var step = sessionStorage.getItem('step');
console.log('当前步骤：', step);            // '2'

// 关闭标签页 → 数据全部消失，下次打开为 null
console.log(sessionStorage.getItem('step')); // null

// 典型场景：多步表单暂存，防止误刷新丢数据
function saveDraft(form) {
  sessionStorage.setItem('form', JSON.stringify(form));
}

🔗 相关词条localStorage 生命周期标签 Web Components FileReader source

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读