localstorage是浏览器提供的持久化本地存储机制,数据在用户不手动清除或未调用代码删除时长期保留,不随页面刷新或浏览器关闭丢失;存取需用setitem()/getitem(),对象须json序列化,注意容量限制与异常处理。

localStorage 是浏览器提供的持久化本地存储机制,数据会一直保留在用户设备上,除非手动清除或代码删除,且不随页面刷新或关闭浏览器而丢失。
存数据:用 setItem() 方法
语法是 localStorage.setItem(key, value),其中 key 是字符串形式的键名,value 必须是字符串(其他类型需先转成字符串)。
- 存字符串直接写:
localStorage.setItem('username', 'Alice') - 存对象或数组要先用
JSON.stringify():localStorage.setItem('cart', JSON.stringify([{id:1, qty:2}])) - 注意:不能直接存函数、undefined、Symbol 等非字符串/非可序列化值,否则会静默转为空字符串或报错
取数据:用 getItem() 方法
语法是 localStorage.getItem(key),返回对应 key 的字符串值;如果 key 不存在,返回 null。
- 取字符串:
const name = localStorage.getItem('username') - 取对象/数组要配合
JSON.parse():const cart = JSON.parse(localStorage.getItem('cart') || '[]')(加|| '[]'防止解析 null) - 建议每次读取后做类型判断或默认值兜底,避免运行时错误
删数据:用 removeItem() 或 clear()
按需选择删除方式:
- 删单个:
localStorage.removeItem('username') - 删全部(慎用):
localStorage.clear() - 没有“批量删指定几个 key”的原生方法,如需可先遍历
localStorage.key(i)判断再删
其他实用技巧
日常开发中常遇到的小问题和应对方式:
-
检查是否支持 localStorage:在使用前加判断,防止低版本浏览器或隐私模式下报错:
if (typeof localStorage !== 'undefined') { ... } -
监听存储变化:在其他标签页修改 localStorage 时,当前页可通过
window.addEventListener('storage', e => {...})监听(注意:触发方自身不会收到该事件) -
大小限制注意:通常约 5–10MB(因浏览器而异),超限时会抛出
QuotaExceededError,建议关键数据加 try-catch
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











