localstorage只存储字符串，存对象需json.stringify()，读取需判空并json.parse()；作用域按origin隔离；clear()是危险操作，应优先使用removeitem()。
localStorage 不是“存进去就能用”，它只认字符串，存对象不序列化就等于白存，读出来不判空不解析就必然报错。
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
localStorage.getItem() 返回 null 或字符串，必须判空再 JSON.parse()
getItem() 找不到键时返回 null，不是 undefined，也不是空字符串。直接 JSON.parse(null) 会炸。
- 安全读取模式：
const userStr = localStorage.getItem('user'); const user = userStr ? JSON.parse(userStr) : null; - 更稳妥可加
try...catch，因为用户可能手动篡改过值，导致 JSON 格式损坏 - 不要假设值一定存在——首次访问页面时所有
getItem()都是null
localStorage 作用域绑定 origin，file:// 协议和跨端口都不可用
它按完整 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)) - 想清空但保留 token？先读出全部键，过滤再逐个删：
Object.keys(localStorage).filter(k => !['token', 'userId'].includes(k)).forEach(k => localStorage.removeItem(k))
真正容易被忽略的不是语法，而是边界：用户在无痕模式下可能根本没开 storage；5MB 限制不是按字符数算，中文、emoji、Base64 都吃得多；storage 事件不会在当前页触发——这些细节不提前踩一遍，上线后问题都是静默发生的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
