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

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

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

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

localStorage.setItem() 是唯一推荐的写入方式，它明确要求 value 必须是字符串。传对象、数组、null 或 undefined 都会被强制转成字符串，比如 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-case 或 camelCase 字母数字组合
• 容量超限？捕获 QuotaExceededError，而不是等页面卡死：

  try {
    localStorage.setItem('data', hugeString);
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      console.warn('localStorage full, fallback to memory cache');
    }
  }

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

localStorage.getItem() 永远返回字符串或 null，哪怕你当初存的是 42 或 true。直接拿它做判断或计算，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 没有类型、没有过期、没有通知、没有事务。它像一张纸条，你写了什么，它就原样贴在浏览器里，直到你撕掉，或者用户自己清空——而这张纸条上，永远只能写字符串。