如何操作浏览器存储_javascript中localStorage怎么用？-js教程-PHP中文网

如何操作浏览器存储_javascript中localStorage怎么用？

狼影

发布： 2025-12-16 22:03:07

原创

951人浏览过

localStorage是浏览器提供的同源、持久化字符串存储机制，容量5–10MB，需手动JSON序列化对象，支持setItem/getItem/removeItem/clear，可通过storage事件监听跨标签页变更，但不防XSS且无过期机制。

如何操作浏览器存储_javascript中localstorage怎么用？

localStorage 是浏览器提供的一种简单持久化存储方式，数据保存在用户本地，关闭页面甚至重启浏览器也不会丢失，适合存少量字符串数据（比如用户偏好、登录状态标记等）。

基本用法：setItem 和 getItem

存数据用 localStorage.setItem(key, value)，取数据用 localStorage.getItem(key)。注意：value 必须是字符串，如果要存对象，得先用 JSON.stringify() 转成字符串；读出来时再用 JSON.parse() 还原。

存一个主题设置：localStorage.setItem('theme', 'dark')
存一个用户信息对象：localStorage.setItem('user', JSON.stringify({name: '张三', id: 101}))
读取并解析：const user = JSON.parse(localStorage.getItem('user'))

删除和清空数据

用 removeItem(key) 删除某一项，用 clear() 清空全部 localStorage（谨慎操作，会影响所有键值）。

删掉主题设置：localStorage.removeItem('theme')
清空当前域名下所有 localStorage：localStorage.clear()

注意事项和常见问题

localStorage 是**同源限制**的（协议+域名+端口完全一致才可访问），且容量一般为 5–10MB（因浏览器而异）。它不支持过期时间，也不能跨窗口实时同步变更（需配合 storage 事件监听）。

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

Moshi Chat

法国AI实验室Kyutai推出的端到端实时多模态AI语音模型，具备听、说、看的能力，不仅可以实时收听，还能进行自然对话。

165

查看详情

监听其他标签页的 localStorage 变更：在 window 上监听 storage 事件，但注意：触发该事件的页面自身不会收到（只通知其他同源窗口）
不能存函数、undefined、Symbol 等非字符串/非可序列化值
敏感信息（如 token）不建议直接存在 localStorage，有 XSS 风险

简易封装一个安全的工具函数

可以自己封装一层，自动处理 JSON 序列化和错误捕获，让使用更稳：

const LS = {<br>  set(key, value) {<br>    try {<br>      localStorage.setItem(key, JSON.stringify(value));<br>    } catch (e) {<br>      console.warn('localStorage set failed:', e);<br>    }<br>  },<br>  get(key) {<br>    try {<br>      const str = localStorage.getItem(key);<br>      return str ? JSON.parse(str) : null;<br>    } catch (e) {<br>      console.warn('localStorage get failed:', e);<br>      return null;<br>    }<br>  }<br>};

登录后复制

用起来就更顺手了：LS.set('cart', [{id:1, qty:2}]); const cart = LS.get('cart');

基本上就这些。localStorage 不复杂但容易忽略细节，用对了能省不少事。

以上就是如何操作浏览器存储_javascript中localStorage怎么用？的详细内容，更多请关注php中文网其它相关文章！