HTML5怎样用sessionStorage临时获取数据_HTML5sessionStorage用法【基础】

顺亿

2026-09-18 • 👁 0人浏览过

sessionStorage仅在当前标签页有效，关闭即清空，存取字符串需用setItem/getItem，对象须JSON.stringify/parse，与localStorage区别在于作用域和生命周期。 session Storage 只在当前浏览器标签页有效，关闭标签页数据就清空，不能跨标签页共享，也不持久化到磁盘。怎么存和取字符串数据 sessionStorage 只接受字符串作为值，存数字、对象、数组时会自动调用

toString()

或

JSON.stringify()

，否则可能出意外结果。存数据必须用

sessionStorage.setItem(key, value)

，

value

会被转成字符串取数据用

sessionStorage.getItem(key)

，返回的永远是

string

类型，即使你存的是数字删单个用

sessionStorage.removeItem(key)

，清空全部用

sessionStorage.clear()

sessionStorage.setItem('user_id', '123');
sessionStorage.setItem('is_admin', 'true');
sessionStorage.setItem('cart', JSON.stringify([{id: 1, qty: 2}]));

const id = sessionStorage.getItem('user_id'); // "123"（字符串）
const admin = sessionStorage.getItem('is_admin') === 'true'; // 手动转布尔
const cart = JSON.parse(sessionStorage.getItem('cart')); // [{id: 1, qty: 2}]

为什么存对象不加 JSON.stringify 会变成 "[object Object]" 因为

setItem()

内部会隐式调用

value.toString()

。对象默认

toString()

"[object Object]"

，再存进去就彻底丢数据了。直接存对象：

sessionStorage.setItem('obj', {a: 1})

→ 实际存入

"[object Object]"

取出来再

JSON.parse()

会报错：

Unexpected token [ in JSON at position 0

正确做法：始终用

JSON.stringify()

序列化，用

JSON.parse()

反序列化 sessionStorage 和 localStorage 有什么关键区别两者 API 完全一致，但生命周期和作用域不同，选错会导致数据“莫名消失”或“不该共享却共享了”。 Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载立即学习 “ 前端免费学习笔记（深入） ”；

sessionStorage

：仅当前 tab 有效，页面刷新保留，关 tab 即销毁，新开 tab 不继承

localStorage

：同源下所有 tab 共享，除非手动

clear()

或用户清除，否则永久存在不要用

sessionStorage

存登录态期望多 tab 同步；也不要误用

localStorage

存敏感临时数据（比如支付中间状态）容易被忽略的边界情况 sessionStorage 看似简单，但在 iframe、页面跳转、SPA 路由切换等场景下行为容易误判。 iframe 中的

sessionStorage

是独立的，父页和子页不共享使用

window.location.href

跳转或表单提交，新页面能正常读取旧页存的数据（同源前提下） Vue/React 单页应用中，路由变化不会清空

sessionStorage

，但用户手动刷新后仍存在——这点常被当成“缓存失效”问题排查半天隐私模式下部分浏览器会限制容量或立即清空，测试时别只在普通窗口验证

相关文章