javascript如何操作浏览器存储？【教程】

localStorage和sessionStorage仅支持字符串值，存对象需jsON.stringify()编码、取时用json.parse()解码；二者区别在于生命周期（持久化vs标签页级）和作用域（同源共享vs单页隔离）；读写应封装容错逻辑并注意JSON局限性与环境限制。

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。

立即学习“Java免费学习笔记（深入）”；

• 推荐封装一个读取函数，自动处理 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；私密模式下部分浏览器会限制写入权限。这些不会立刻报错，但会在特定环境里静默失效。