JavaScript 中怎么在前端缓存中安全存储和读取 JSON 数据-js教程-PHP中文网

安全存取JSON数据需校验、兜底和类型转换：存前检查非法值并处理Date/RegExp，用try-catch包裹序列化；取时判空再解析，设默认值；敏感数据禁用localStorage，改用httpOnly Cookie或IndexedDB。

javascript 中怎么在前端缓存中安全存储和读取 json 数据

在前端缓存中安全存取 JSON 数据，核心是用 localStorage 或 sessionStorage 配合 JSON 序列化与反序列化，但必须处理类型丢失、解析异常和数据校验三类风险。直接 JSON.stringify() 和 JSON.parse() 不够安全，关键在兜底逻辑和边界判断。

存数据：先校验再序列化，避开非法值

localStorage 只接受字符串，但原始对象可能含函数、undefined、Date、RegExp 或循环引用——这些都会导致 JSON.stringify() 失败或静默丢数据。

对值做基础类型检查，拒绝函数、undefined、Symbol
把 Date 转成时间戳（date.getTime()），RegExp 存为 { source, flags } 对象
用 try...catch 包裹序列化过程，失败时记录错误而非静默忽略
推荐封装写法：

function saveToStorage(key, data) {
  try {
    // 简单校验：排除 null/undefined，其他类型尽量转成可序列化结构
    if (data == null) throw new Error('数据为空');
    const jsonStr = JSON.stringify(data);
    localStorage.setItem(key, jsonStr);
  } catch (e) {
    console.error(`存储 ${key} 失败：`, e.message);
  }
}

取数据：先判空再解析，始终设默认值

localStorage.getItem() 返回 null（未设置）或字符串，但 JSON.parse(null) 得 null，JSON.parse('') 直接报错。不能假设读出来的一定是合法 JSON 字符串。

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

先检查返回值是否为非空字符串，否则直接返回默认值
用 try...catch 包裹 JSON.parse()，防止损坏数据导致脚本中断
默认值建议按使用场景设定，如数组用 []，对象用 {}
示例：

function loadFromStorage(key, defaultValue = []) {
  const str = localStorage.getItem(key);
  if (!str || typeof str !== 'string') return defaultValue;
  try {
    return JSON.parse(str);
  } catch (e) {
    console.warn(`解析 ${key} 失败：`, e.message);
    return defaultValue;
  }
}

特殊类型要手动转换，别依赖原生 JSON

原生 JSON.stringify() 会把 Date 转成 ISO 字符串，但 JSON.parse() 不会还原为 Date 实例；Map、Set、RegExp 等根本无法序列化。

存 Date：用 date.getTime()，取时 new Date(ms)
存正则：转成 { source: 'pattern', flags: 'g' }，取时 new RegExp(obj.source, obj.flags)
含函数、原型方法或自定义类的数据，不适合用 localStorage，应改用 IndexedDB