javascript如何存储数据_localstorage和sessionstorage有何区别-js教程-PHP中文网

javascript如何存储数据_localstorage和sessionstorage有何区别

狼影

发布： 2025-12-19 20:58:02

原创

116人浏览过

localStorage长期存储、跨会话共享，sessionStorage仅限当前标签页会话；二者均同源隔离、仅存字符串、API相同，但生命周期与作用域不同。

javascript如何存储数据_localstorage和sessionstorage有何区别

JavaScript 中的 localStorage 和 sessionStorage 都是浏览器提供的 Web Storage API，用于在客户端存储键值对数据，但它们的生命周期、作用域和使用场景有本质区别。

localStorage：长期保存，跨会话可用

数据一旦写入，会一直保留在浏览器中，除非被代码主动删除或用户手动清除缓存。它不随页面关闭、标签页关闭或浏览器重启而消失，适合存储需要持久化的内容，比如用户偏好设置、主题选择、登录态标识（注意：敏感信息如 token 不建议明文存这里）。

作用域为同源（协议 + 域名 + 端口），同一域名下所有页面共享同一个 localStorage
容量通常为 5–10 MB（不同浏览器略有差异）
只能存储字符串，存对象需先 JSON.stringify()，读取时用 JSON.parse()

sessionStorage：仅限当前会话，页面级隔离

数据只在当前浏览器标签页（或窗口）的会话周期内有效。关闭该标签页后，数据自动清空；新开一个相同 URL 的标签页，也会拥有独立的 sessionStorage。适合临时状态管理，比如表单草稿、导航参数、多步骤流程中的中间数据。

即使同源，不同标签页之间互不共享 sessionStorage
容量与 localStorage 相当，也受浏览器限制
同样只支持字符串，对象需序列化/反序列化

基本操作方式完全一致

两者 API 完全相同，都提供 setItem(key, value)、getItem(key)、removeItem(key) 和 clear() 方法：

中国工商网电子商务购物中心系统EMall

完全公开源代码，并无任何许可限制特别基于大型电子商务网站的系统开发 Microsoft SQL Server 2000后台数据库，充分应用了存储过程的巨大功效基于类模块的扩展数据访问能力支持任何类型的大型数据库加密用户登录信息(cookie) 易于安装的系统和应用功能 100%的asp.net的代码，没有COM，java或者其他的格式完全基于MS建议的系统安全设计最佳的应用程序,数据库

查看详情

立即学习“Java免费学习笔记（深入）”；

// 存储
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('formDraft', JSON.stringify({ name: 'Alice', email: 'a@b.c' }));

// 读取
const theme = localStorage.getItem('theme'); // 'dark'
const draft = JSON.parse(sessionStorage.getItem('formDraft')); // { name: 'Alice', ... }

// 删除
localStorage.removeItem('theme');
sessionStorage.clear(); // 清空当前会话所有数据

登录后复制