什么是本地存储_如何用localStorage保存数据【教程】

11次阅读

localStorage只存字符串,存对象jsON.Stringify(),取值需json.parse()并try/catch,数字布尔需显式转换,键名用字母数字组合,超限捕获QuotaExceededError,clear()慎用。

什么是本地存储_如何用localStorage保存数据【教程】

localStorage 不是“存个数据就完事”的黑盒,它只认字符串,存对象不序列化就等于存了个空壳——这是你第一次用就可能翻车的地方。

setItem() 怎么存才不会丢数据

localStorage.setItem() 是唯一推荐的写入方式,它明确要求 value 必须是字符串。传对象、数组、NULLundefined 都会被强制转成字符串,比如 localStorage.setItem('user', {name: 'Alice'}) 实际存进去的是 "[Object Object]",取出来根本没法用。

  • 存对象或数组:必须先用 JSON.stringify(),例如 localStorage.setItem('settings', JSON.stringify({theme: 'dark'}))
  • 存数字/布尔值:别依赖隐式转换false → "false"),显式转更可控,比如 localStorage.setItem('count', String(42))localStorage.setItem('active', 'true')
  • 键名别用特殊字符:空格、斜杠、中文、控制符在某些安卓 webview 里会静默失败,坚持用 kebab-casecamelCase 字母数字组合
  • 容量超限?捕获 QuotaExceededError,而不是等页面卡死:
    try {   localStorage.setItem('data', hugeString); } catch (e) {   if (e.name === 'QuotaExceededError') {     console.warn('localStorage full, fallback to memory cache');   } }

getItem() 取出来为什么不是对象

localStorage.getItem() 永远返回字符串或 null,哪怕你当初存的是 42true。直接拿它做判断或计算,90% 的 bug 都出在这儿。

  • 别写 if (localStorage.getItem('isLogin') === true) —— 它永远是 false,因为取出来是字符串 "true"
  • 安全读对象:先判空,再 JSON.parse(),并加 try/catch
    const data = localStorage.getItem('config'); let config = {}; try {   config = data ? JSON.parse(data) : {}; } catch (e) {   console.warn('localStorage config parse failed, using default'); }
  • 读数字别忘了类型转换const count = number(localStorage.getItem('count')) || 0
  • 判断是否存在,别用 if (localStorage.getItem('x')) —— 因为 "0""false" 都是真值;正确写法是 localStorage.getItem('x') !== null

removeItem() 和 clear() 到底该删谁

localStorage.removeItem() 删除单个键,安全;localStorage.clear() 是核弹级操作,会把同源下所有页面共用的数据一锅端,生产环境误用等于清空用户全部偏好设置。

  • 想删一组相关数据(比如购物车项)?遍历判断前缀,别全清:
    Object.keys(localStorage).forEach(key => {   if (key.startsWith('cart_')) {     localStorage.removeItem(key);   } });
  • removeItem() 对不存在的键静默失败,不报错也不提示,适合“尽力删”场景
  • clear() 不可逆,且影响范围远超当前页面——比如你在一个管理后台调用它,可能顺手清掉用户在另一个标签页里刚填一半的表单草稿

真正难的不是 API 会不会用,而是记住:localStorage 没有类型、没有过期、没有通知、没有事务。它像一张纸条,你写了什么,它就原样贴在浏览器里,直到你撕掉,或者用户自己清空——而这张纸条上,永远只能写字符串。

text=ZqhQzanResources