localstorage是浏览器持久化本地存储机制，仅支持字符串、跨页面共享且关浏览器不丢失；需用json序列化存对象，与sessionstorage区别在于生命周期和作用域。
localStorage 是浏览器内置的持久化本地存储机制，用起来简单，但几个关键点必须清楚：它只认字符串，跨页面共享，关浏览器也不丢数据。
localStorage 的基本操作
所有操作都通过 setItem、getItem、removeItem 和 clear 四个方法完成：
- 存数据：
localStorage.setItem("theme", "dark")—— 键和值都必须是字符串 - 取数据：
const theme = localStorage.getItem("theme")—— 不存在时返回null，不是undefined - 删单个：
localStorage.removeItem("theme") - 清空全部：
localStorage.clear()
存对象或数组时要手动序列化：localStorage.setItem("user", JSON.stringify({name: "小明", age: 28}))
读取时再解析：const user = JSON.parse(localStorage.getItem("user"))
localStorage 和 sessionStorage 的核心区别
两者 API 完全一致，差异集中在生命周期和作用域：
- localStorage：数据永久保留，同一源（协议+域名+端口）下所有页面都能访问，关闭浏览器、重启电脑都不影响
- sessionStorage：仅限当前标签页，关掉该页就清空；新开同域名标签页也拿不到之前的数据
- 两者都不发往服务器，不参与 HTTP 请求，这点和 cookie 本质不同
- 都受同源策略限制，跨域页面无法互通
什么时候该选哪个？
选错容易引发逻辑 bug 或体验问题：
立即学习“Java免费学习笔记（深入）”；
- 用 localStorage 存长期配置类数据：深色模式开关、语言偏好、记住的用户名、登录 token（注意：token 不建议明文存，需结合其他安全措施）
- 用 sessionStorage 存临时中转状态：多步表单的中间数据、跳转时携带的 ID、防重复提交的标记
- 两者都不能存敏感信息（如密码、身份证号、完整银行卡号），XSS 攻击可直接读取
常见坑点提醒
实际开发中容易忽略的细节：
- 忘了 JSON 序列化/反序列化，导致存进去是
[object Object]，取出来无法使用 - 误以为 sessionStorage 在多个标签页间共享，结果状态丢失
- 在非同源环境（比如 iframe 跨域、localhost vs 127.0.0.1）下尝试读写，静默失败
- 未做兼容性判断，老版本 IE 或某些 WebView 可能不支持，可用
if (typeof localStorage !== 'undefined')防御
