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 空间不足');
// 触发清理逻辑或切换存储方案
}
}
实际项目里最容易被忽略的，是跨页面写入后立即读取的时机问题，以及未处理 null 就直接 JSON.parse() 的崩溃风险。 
