HTML5本地存储localStorage怎么用_存数据取数据方法【解答】_技术教程

localStorage存取数据最安全做法是：存对象用JSON.stringify()、取值先判空再JSON.parse()；键名用字母数字组合；超限时捕获QuotaExceededError并降级；避免clear()误删，批量删除需遍历判断前缀。

localStorage.setItem() 存字符串最安全

localStorage 只能存字符串，直接传对象或数字会自动调用 toString()，导致数据失真。比如存 {name: "张三", age: 25}，不处理就存进去，取出来是 [object Object]。

实操建议：

存对象前必须用 JSON.stringify() 序列化
存布尔值、数字时也建议统一转字符串或显式序列化，避免隐式转换歧义（如 false 变成 ""）
键名尽量用字母数字组合，避免空格、斜杠、控制字符，否则某些浏览器可能静默失败

localStorage.setItem('user', JSON.stringify({name: "张三", age: 25}));
localStorage.setItem('count', String(100)); // 显式转字符串更可控

localStorage.getItem() 取值后记得 JSON.parse()

取出来的永远是字符串，哪怕你当初存的是数字或布尔值。不解析就直接用，很容易在条件判断或计算中出错——比如 if (localStorage.getItem('isLogin') === true) 永远为 false，因为取出来是 "true" 字符串。

常见错误现象：

JSON.parse(null) 报错：getItem() 找不到键时返回 null，不能直接丢给 JSON.parse()
存了非法 JSON（比如手动拼接字符串），JSON.parse() 会抛 SyntaxError

const userStr = localStorage.getItem('user');
const user = userStr ? JSON.parse(userStr) : null; // 先判空再解析
const count = Number(localStorage.getItem('count')) || 0;

localStorage.removeItem() 和 clear() 的适用场景不同

removeItem(key) 删除单个键值对，clear() 清空全部。别在用户仅想“退出当前账号”时误用 clear()，可能把其他功能的配置（比如主题色、语言偏好）也删了。

使用注意点：

removeItem() 对不存在的键静默失败，不报错也不提示
clear() 不可逆，且会影响同源下所有页面共享的 localStorage，谨慎用于生产环境
如果要批量删，自己遍历 Object.keys(localStorage) 判断前缀再删，比全清更稳妥

// 安全地删一组以 'cart_' 开头的数据
Object.keys(localStorage).forEach(key => {
  if (key.startsWith('cart_')) {
    localStorage.removeItem(key);
  }
});

localStorage 的容量和错误边界必须主动检查

多数浏览器限制在 5MB 左右（不是精确值，Chrome 是约 5.2MB，Safari 移动端可能只有 2.5MB），超限会触发 QuotaExceededError。但这个错误不会自动抛出——只有在 setItem() 失败时才发生，且部分旧版 Safari 还会静默截断。

关键应对方式：

写入前先估算字符串长度：new TextEncoder().encode(str).length（UTF-8 字节长度）比 str.length 更准
捕获异常并降级：比如改用 sessionStorage 或提示用户清理
不要假设“存得进就一定取得出”，特别在 iOS Safari 中，存储后立即读取有时返回 null（需加短延时或重试）

try {
  localStorage.setItem('data', hugeString);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.warn('localStorage 空间不足');
    // 触发清理逻辑或切换存储方案
  }
}