javascript怎样使用本地存储【教程】

localStorage.setItem无反应因值非字符串，会静默转为"[object Object]"等；getItem返回null表示键不存在，需检查拼写、同源性；Safari无痕模式禁用localStorage，须try/catch降级；大量或结构化数据应选IndexedDB而非localStorage。

localStorage.setItem 保存数据时为什么没反应？

常见现象是调用 localStorage.setItem('key', 'value') 后刷新页面数据消失，或控制台没报错但查不到值。根本原因通常是：值不是字符串类型，而 localStorage 只接受字符串——传入对象、数组、null 或 undefined 会静默转成 "null" 或 "undefined"，导致取出来无法还原。

• 正确做法：序列化再存，比如 localStorage.setItem('user', JSON.stringify({name: 'Alice'}))
• 错误写法：localStorage.setItem('user', {name: 'Alice'}) → 实际存入的是 "[object Object]"
• 注意 JSON.stringify 无法处理函数、undefined、Date 对象等，需自行过滤或转换

读取 localStorage.getItem 返回 null 怎么排查？

getItem 返回 null 表示键完全不存在（不是空字符串），不是“读取失败”。容易误判的点有三个：键名拼写不一致、作用域隔离（不同协议/端口/子域名互不可见）、或数据被其他脚本清空。

• 检查键名是否严格匹配：大小写敏感，前后空格也会导致不匹配，比如 getItem('Token') ≠ getItem('token')
• 确认当前页面 URL 和存储时的 URL 同源：http://a.com 和 https://a.com 不共享；localhost:3000 和 localhost:8080 也不共享
• 可在控制台直接运行 Object.keys(localStorage) 查看所有已存键名，快速验证是否存在

localStorage 在 Safari 无痕模式下抛出 QuotaExceededError 怎么办？

Safari 无痕模式默认禁用 localStorage，任何写入操作都会触发 QuotaExceededError（即使只是 1 字节）。这不是配额不足，而是策略性拒绝。

ShopEx助理

一个类似淘宝助理、ebay助理的客户端程序，用来方便的在本地处理商店数据，并能够在本地商店、网上商店和第三方平台之间实现数据上传下载功能的工具。功能说明如下：1.连接本地商店：您可以使用ShopEx助理连接一个本地安装的商店系统，这样就可以使用助理对本地商店的商品数据进行编辑等操作，并且数据也将存放在本地商店数据库中。默认是选择“本地未安装商店”，本地还未安

下载

• 必须加 try/catch 包裹写入逻辑，例如：

  try {
    localStorage.setItem('flag', '1');
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      // 降级方案：用内存对象模拟，或提示用户关闭无痕模式
    }
  }

• 不能依赖 localStorage.length 或 localStorage.key(0) 判断是否可用——这些在无痕模式下也直接抛错
• 部分安卓 WebView 也有类似限制，建议统一做可用性探测，而非仅检测浏览器类型

需要存大量数据或结构化查询时，localStorage 还合适吗？

localStorage 是纯键值对、同步阻塞、无索引、无事务的简单存储。单条数据超几 MB 就可能卡死主线程；想按字段搜索、分页、模糊匹配，它完全不支持。

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

• 替代方案优先级：小量用户偏好 → localStorage；中量结构化数据 → IndexedDB；临时缓存 → sessionStorage 或内存对象
• 不要用 localStorage 存 token 并设“过期时间”：它本身无自动过期机制，得手动存时间戳并每次读取时比对
• 敏感信息（如短期 token）避免存 localStorage，因 XSS 攻击可直接读取——httpOnly Cookie 才是更安全的选择