JavaScript如何操作浏览器存储？

JavaScript操作浏览器存储的核心在于正确使用localStorage和sessionStorage——二者虽API简单、兼容性好，却严格限定只接受字符串值，存对象必须JSON.stringify()编码、取时用JSON.parse()解码；关键区别在于生命周期（localStorage持久跨窗口，sessionStorage仅限单页会话）和作用域（同源共享 vs 标签页隔离）；实际开发中更需警惕JSON的固有局限（无法序列化Date、函数、undefined等）、环境限制（私密模式禁写、配额超限、跨iframe访问失败）以及未处理null或解析异常导致的静默崩溃，因此务必封装带容错机制的读写工具函数，让存储真正可靠可用。

JavaScript 操作浏览器存储，核心就两条路：localStorage 和 sessionStorage，它们够用、兼容好、不用额外依赖。但直接塞对象或函数会出错，读写前必须处理类型。

为什么 localStorage.setItem() 存不了对象？

因为 localStorage 只接受字符串作为值。传入对象（比如 {name: "Alice"}）时，它会自动调用 .toString()，结果变成 "[object Object]"，数据彻底丢失。

• 正确做法：存之前用 JSON.stringify() 编码
• 取出来后必须用 JSON.parse() 解码，否则拿到的是字符串而非原始结构
• 如果值是 null、undefined 或函数，JSON.stringify() 会忽略或转成 null，这类值无法可靠存储

localStorage 和 sessionStorage 到底怎么选？

区别不在“本地”还是“会话”，而在于生命周期和作用域：

• localStorage：关闭标签页不丢，除非手动清除或代码调用 localStorage.clear()；同源（协议+域名+端口）下所有窗口共享
• sessionStorage：仅当前标签页有效，关掉该页即清空；即使同源，新开的标签页也拿不到原页存的数据
• 两者 API 完全一致（setItem/getItem/removeItem/clear），替换使用几乎零成本

如何安全地读写带默认值的存储项？

直接调用 localStorage.getItem("key") 返回可能是 null，不判空就 JSON.parse(null) 会报错：Unexpected token 'n' in JSON at position 0。

• 推荐封装一个读取函数，自动处理 null 和解析失败：

function getStorage(key, defaultValue = null) {
  const raw = localStorage.getItem(key);
  if (raw == null) return defaultValue;
  try {
    return JSON.parse(raw);
  } catch {
    return defaultValue;
  }
}

• 写入时也建议加 try/catch，因为用户可能禁用存储、或超出 5MB 限额（不同浏览器略有差异），此时 setItem 会抛 QuotaExceededError

真正容易被忽略的不是语法，而是边界情况：JSON 不支持 Date、RegExp、undefined、循环引用；跨域 iframe 无法访问父页的 localStorage；私密模式下部分浏览器会限制写入权限。这些不会立刻报错，但会在特定环境里静默失效。

好了，本文到此结束，带大家了解了《JavaScript如何操作浏览器存储？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！