如何通过 JSON-Schema 校验引擎保证读取出的 localStorage 历史缓存完全符合当前前端代码的类型规范-js教程-PHP中文网

json-schema校验是保障localstorage数据类型安全的最可靠方式：先定义严格可复用schema，再封装带ajv校验的读取函数，支持版本升级迁移，并通过开发/构建/运行时三重保障实现可观测性。

直接用 json-schema 对 localstorage 读取的原始字符串做校验，是保证缓存数据“类型安全”的最可靠方式——它不依赖运行时断言或手动 type-check，而是用声明式规则在解析前就拦截非法结构。

第一步：为业务数据定义严格、可复用的 JSON Schema

不要把 schema 写死在组件里。例如你存储的是用户偏好设置：

{
  "type": "object",
  "properties": {
    "theme": { "type": "string", "enum": ["light", "dark", "auto"] },
    "fontSize": { "type": "number", "minimum": 12, "maximum": 24 },
    "notifications": { "type": "boolean" }
  },
  "required": ["theme", "fontSize", "notifications"],
  "additionalProperties": false
}

保存为 schema/userPrefs.json，并确保字段名、类型、约束（如 enum、min/max、required）与当前 TypeScript 接口完全对齐。推荐用工具如 ts-json-schema-generator 从 TS 类型自动生成，避免手写偏差。

第二步：封装带校验的 localStorage 读取函数

每次读取都走校验流程，失败则清除无效缓存并返回默认值：

先用 localStorage.getItem(key) 获取原始字符串
尝试 JSON.parse()；若抛错，说明不是合法 JSON → 视为损坏，清空并返回默认
用校验引擎（如 AJV）校验解析后的 JS 对象是否符合 schema
校验失败 → 清空该 key，返回默认值（如 { theme: 'light', fontSize: 16, notifications: true }）

示例逻辑（使用 AJV）：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

import Ajv from 'ajv';
const ajv = new Ajv({ strict: true });
const validate = ajv.compile(userPrefsSchema);

function safeGetUserPrefs(): UserPrefs {
  const raw = localStorage.getItem('userPrefs');
  if (!raw) return defaultPrefs;
  
  try {
    const parsed = JSON.parse(raw);
    if (validate(parsed)) return parsed;
  } catch (e) {
    // JSON parse error or validation failure
  }
  
  localStorage.removeItem('userPrefs');
  return defaultPrefs;
}