JavaScript 中 JSON 数据怎么在本地缓存中安全存储-js教程-PHP中文网

javascript中json数据在localstorage安全存储的核心是序列化前清理与解析时兜底，需校验数据合法性、捕获异常、手动处理日期/正则等特殊类型，并避免存储敏感信息或超限数据。

javascript 中 json 数据怎么在本地缓存中安全存储

JavaScript 中 JSON 数据在本地缓存（主要是 localStorage）中安全存储，核心不是“能不能存”，而是“怎么避免存错、读崩、数据丢失或被篡改”。关键在于两步：序列化前清理 + 解析时兜底，中间穿插类型适配和异常防护。

存之前：先校验，再序列化

localStorage 只接受字符串，直接存对象会变成 "[object Object]"，毫无意义。必须用 JSON.stringify() 转换，但这个过程并不总是安全：

函数、undefined、Symbol、循环引用会被静默忽略或报错
日期对象转成 ISO 字符串后，不再是 Date 实例；正则、Map、Set 等根本无法原样保留
空值或非法结构可能让整个存操作失败，却无提示

推荐做法是封装一个带校验的写入函数：

function saveJson(key, data) {
  if (data == null) {
    localStorage.removeItem(key);
    return;
  }
  try {
    const str = JSON.stringify(data);
    localStorage.setItem(key, str);
  } catch (e) {
    console.error(`[${key}] 存储失败：`, e.message);
  }
}

取出来：先判断，再解析

localStorage.getItem() 返回的是字符串或 null，不能直接丢给 JSON.parse()：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

JSON.parse(null) → null（不报错但结果意外）
JSON.parse('') 或损坏字符串 → 直接抛出语法错误，中断脚本
用户手动编辑 localStorage 内容后格式错乱，很常见

所以读取必须加防御逻辑：

function loadJson(key, fallback = {}) {
  const str = localStorage.getItem(key);
  if (!str || typeof str !== 'string') return fallback;
  try {
    return JSON.parse(str);
  } catch (e) {
    console.warn(`[${key}] 解析失败，返回默认值`, e.message);
    return fallback;
  }
}

特殊类型要手动处理

原生 JSON 不支持某些 JS 类型，若业务需要保留语义，就得自己编解码：

日期：存前用 date.getTime() 或 date.toISOString()；读取后用 new Date(ms) 或 new Date(isoStr) 恢复
正则：存为 { source: 'abc', flags: 'g' }；读取后用 new RegExp(obj.source, obj.flags)
BigInt、Map、Set：不建议走 localStorage，更适合 IndexedDB 或内存缓存