首页 > 网页制作 >HTML localStorage本地存储用法速查

HTML localStorage本地存储用法速查

来源：互联网 2026-08-01 07:59:12

html资讯合集

localStorage仅支持字符串类型数据，对象必须先用JSON.stringify转换为字符串再存储；读取时务必先判空，再用JSON.parse解析，否则容易报错。按origin隔离，file://协议下不可用。谨慎使用clear()，推荐使用removeItem()逐个删除。注意隐私模式可能存在限制，且存储上限为5MB，使用前需检查浏览器兼容性。

先说几个核心判断：localStorage 并非“存进去就能直接用”那么简单。它只认字符串，存储对象若不做序列化等于白存；读取时不判空、不解析，必然报错。更不用说作用域隔离、隐私模式下的坑——不提前摸清，上线后迟早要踩雷。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

setItem() 必须传字符串，对象数组得先 JSON.stringify()

直接写 localStorage.setItem('user', {name: 'Alice'})，看起来没报错？实际存进去的是 "[object Object]"——后续你试图用 JSON.parse() 解析，浏览器会直接抛出 SyntaxError。这个坑很多新手甚至老手都踩过。

正确做法：localStorage.setItem('user', JSON.stringify({name: 'Alice', age: 28}))
注意：Date、RegExp、函数、undefined 这些类型，JSON.stringify() 无法正常处理。比如 new Date()，需先手动转为 toISOString()
更隐蔽的是循环引用对象（如 {a: {}}; a.b = a），序列化时会直接抛出 TypeError: Converting circular structure to JSON。解决办法要么提前剥离循环引用，要么传入自定义 replacer

getItem() 返回 null 或字符串，必须判空再 JSON.parse()

getItem() 找不到键时返回 null，不是 undefined，更不是空字符串。而 JSON.parse(null) 的结果，说炸就炸。

稳妥的读取模式：const userStr = localStorage.getItem('user'); const user = userStr JSON.parse(userStr) : null;
更保险的做法是套一层 try...catch——用户可能手动篡改 localStorage 的值，导致 JSON 格式损坏
永远不要假设值一定存在于缓存中。首次访问页面的用户，所有 getItem() 返回的都是 null

作用域绑定 origin，file:// 协议和跨端口都不可用

localStorage 按完整 origin（协议 + 域名 + 端口）隔离。这意味着：

http://localhost:3000 和 http://localhost:3001 是两个完全独立的存储空间，互不相通
https://example.com 和 http://example.com 之间也互相不可见
双击打开 HTML 文件走的是 file:/// 协议，Chrome、Edge 等现代浏览器默认会禁用 localStorage，直接抛 SecurityError
开发时务必启动本地服务，比如 python3 -m http.server 8000，或者用 Vite / Webpack Dev Server

别乱用 clear()，removeItem() 才是生产环境里的默认操作

localStorage.clear() 就像一颗“核按钮”——它会删除当前 origin 下所有键，操作不可逆，而且不会通知其他标签页发生了什么。必须警惕的是，上线代码里绝不允许出现 localStorage.clear()，除非是用户明确主动触发的“重置所有设置”操作。

日常清理用 localStorage.removeItem('theme')
批量移除可以这样：['cart', 'searchHistory'].forEach(k => localStorage.removeItem(k))
如果想清空但保留某些关键键？先读出全部键，过滤后再逐个删除：Object.keys(localStorage).filter(k => !['token', 'userId'].includes(k)).forEach(k => localStorage.removeItem(k))

真正容易被忽视的不是语法本身，而是那些边界情况：用户在无痕模式下可能根本没开 storage；5MB 限制不是按字符数算的，中文、emoji、Base64 都占得多；storage 事件不会在当前页面触发……这些细节不提前踩一遍，上线后出问题，排查起来可没那么轻松。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述