localStorage的setItem和getItem仅支持字符串，存对象需JSON序列化，取值须判null并容错解析；键名应统一前缀，敏感数据慎存，大文本需评估容量。
用 setItem 和 getItem 存取本地字符串数据，核心是确保数据类型安全、键名合理、异常可处理——它们本身只接受/返回字符串，所以存对象或数组必须手动序列化与解析。
存字符串：直接传入，但注意空值与特殊字符
localStorage.setItem(key, value) 的 value 会被自动转为字符串（例如 setItem('count', 123) 实际存的是 "123"），但建议显式转换以避免隐式行为误导：
- 存纯字符串：直接传入，如
localStorage.setItem('theme', 'dark') - 存数字/布尔值：显式转字符串更清晰，如
localStorage.setItem('timeout', String(3000)) - 避免传
null或undefined：它们会变成字符串"null"或"undefined"，后续读取易出错；建议提前校验并设默认值
取字符串：始终检查返回值是否为 null
localStorage.getItem(key) 在键不存在时返回 null（不是空字符串！），这是最常见的误判点：
- 正确判断方式：
const theme = localStorage.getItem('theme'); if (theme !== null) { ... } - 若需默认值，用逻辑运算符简洁处理：
const theme = localStorage.getItem('theme') ?? 'light' - 不要直接用于条件判断：
if (localStorage.getItem('flag'))在值为"false"时也会为真，应明确比较：localStorage.getItem('flag') === 'true'
存对象或数组：必须配合 JSON.stringify / JSON.parse
localStorage 不支持直接存对象，必须序列化；读取后也必须解析，且要捕获可能的语法错误：
- 存：
localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 })) - 取（带容错）：推荐封装成安全函数
function getJSON(key) {
const str = localStorage.getItem(key);
if (!str) return null;
try {
return JSON.parse(str);
} catch (e) {
console.warn(`Invalid JSON in localStorage key "${key}"`, e);
return null;
}
}
其他规范建议
提升健壮性与可维护性的小实践：
- 统一前缀管理键名，避免冲突，如
'myapp_theme'、'myapp_token' - 敏感信息（如 token）慎存 localStorage，优先考虑
httpOnlyCookie 或内存存储 - 存大文本前评估大小（localStorage 通常限 5–10MB），超限时考虑压缩或分片
- 修改后可通过
storage事件通知同源其他页面：window.addEventListener('storage', handler)
