首页 > web前端 > js教程 > 正文

JavaScript如何实现本地存储_使用localStorage和sessionStorage的区别?

紅蓮之龍
发布: 2025-12-20 19:54:09
原创
930人浏览过
localStorage长期存储且同源跨标签页共享,sessionStorage仅限当前标签页会话期。二者均只支持字符串存储,需JSON序列化对象,注意安全与容量限制。

javascript如何实现本地存储_使用localstorage和sessionstorage的区别?

JavaScript 中的本地存储主要通过 localStoragesessionStorage 实现,它们都提供键值对形式的字符串存储,但生命周期和作用域有本质区别

localStorage:长期保存,跨窗口共享

localStorage 的数据会一直保留在浏览器中,除非被代码主动清除或用户手动删除。它在同源(协议 + 域名 + 端口)的所有标签页和窗口间共享。

  • 使用 localStorage.setItem(key, value) 存储(value 会自动转为字符串)
  • localStorage.getItem(key) 读取,返回字符串,需手动解析 JSON
  • 调用 localStorage.removeItem(key)localStorage.clear() 删除
  • 适合存用户偏好、主题设置、离线缓存等需要持久化的内容

sessionStorage:仅当前会话有效,不跨标签页

sessionStorage 的数据只在当前浏览器标签页(或窗口)的会话周期内有效。关闭该标签页后数据自动清空,且不会与其他同源标签页共享。

  • API 与 localStorage 完全一致:setItemgetItemremoveItem
  • 适用于临时状态,比如表单草稿、多步流程中的中间数据、登录态临时凭证
  • 刷新页面不会丢失,但关掉标签页就没了

关键注意事项

两者都只能存字符串,存对象或数组必须先用 JSON.stringify(),读取时再用 JSON.parse() 还原;否则会得到 [object Object] 这类无效结果。

Spirit Me
Spirit Me

SpiritMe允许用户使用数字化身制作视频,这些化身可以模拟用户的声音和情感

Spirit Me 178
查看详情 Spirit Me

立即学习Java免费学习笔记(深入)”;

  • 存储前建议加 try-catch,防止序列化失败或超出容量(通常约 5–10MB)报错
  • 敏感信息(如 token、密码)不应直接存在本地存储中,容易被 XSS 攻击窃取
  • 无法监听存储变化,但可通过 storage 事件在其他同源窗口中响应变更(localStorage 可触发,sessionStorage 不触发)

简单示例对比

假设在页面中执行:

localStorage.setItem('user', JSON.stringify({name: 'Alice'}));<br>sessionStorage.setItem('tempId', 'abc123');
登录后复制

之后新开一个同源标签页:
— 能用 localStorage.getItem('user') 读到数据
— 但 sessionStorage.getItem('tempId') 返回 null

以上就是JavaScript如何实现本地存储_使用localStorage和sessionStorage的区别?的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号