如何用 setItem 与 getItem 规范地存取本地的字符串数据-js教程-PHP中文网

localstorage的setitem和getitem仅支持字符串，存对象需json序列化，取值须判null并容错解析；键名应统一前缀，敏感数据慎存，大文本需评估容量。

如何用 setitem 与 getitem 规范地存取本地的字符串数据

用 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;
  }
}