html5 无内置散列算法api，但可通过web crypto api的subtle.digest()实现localstorage数据完整性校验：序列化数据→计算sha-256哈希→与数据同存json对象中→读取时重新计算并timingsafeequal比对。
HTML5 本身不直接提供散列算法（如 SHA-256、MD5）的内置 API 来校验本地存储（如 localStorage、sessionStorage 或 IndexedDB）中数据的完整性。但你可以结合 Web Crypto API（现代浏览器支持）手动实现数据哈希计算与比对，从而在读写阶段主动验证数据是否被意外或恶意篡改。
使用 Web Crypto API 计算和验证数据哈希
Web Crypto API 提供了安全、高效的加密原语，包括 subtle.digest() 方法，可用于生成 ArrayBuffer 格式的哈希值。关键步骤如下：
- 将待存储的数据（字符串、对象等）先序列化为 UTF-8 字节流（例如用
new TextEncoder().encode(str)） - 调用
crypto.subtle.digest('SHA-256', bytes)获取哈希摘要（返回 Promise） - 将哈希值转为十六进制字符串（便于存储和比对），与原始数据一同存入
localStorage - 读取时重新计算哈希，并与存储的哈希值严格比对（推荐使用
crypto.subtle.timingSafeEqual()防侧信道攻击）
存储结构建议：哈希与数据分离或内联
为便于维护，推荐将哈希值与数据绑定存储。例如：
✅ 推荐格式（JSON 封装）：
{"data":"user_prefs","hash":"a1b2c3...","timestamp":1712345678}⚠️ 不推荐单独用 key 命名哈希（如 data_hash 和 data_value），易出现键不同步或覆盖遗漏。
存储前确保 JSON 序列化一致（如统一使用 JSON.stringify(obj, null, 0) 避免空格/换行差异影响哈希）。
注意 Web Crypto 的限制与兼容性
该方案依赖 HTTPS（或 localhost）环境，非安全上下文（HTTP 页面）中 crypto.subtle 可能不可用或受限。
- 主流浏览器（Chrome 91+、Firefox 90+、Edge 91+、Safari 16.4+）已稳定支持 SHA-256/SHA-384/SHA-512
- 避免使用 MD5 或 SHA-1（已被认为不安全，Web Crypto 中部分浏览器已弃用）
- 若需兼容老旧环境，可引入轻量级纯 JS 库（如
sha256npm 包），但需自行评估其安全性与性能开销
实际校验流程示例（简化版）
写入时：
async function saveWithHash(key, value) {
const str = JSON.stringify(value);
const bytes = new TextEncoder().encode(str);
const hash = await crypto.subtle.digest('SHA-256', bytes);
const hex = Array.from(new Uint8Array(hash))
.map(b => b.toString(16).padStart(2, '0'))
.join('');
localStorage.setItem(key, JSON.stringify({ data: str, hash: hex }));
}
读取并校验时：
async function loadWithIntegrity(key) {
const item = localStorage.getItem(key);
if (!item) return null;
const { data, hash } = JSON.parse(item);
const bytes = new TextEncoder().encode(data);
const hashNew = await crypto.subtle.digest('SHA-256', bytes);
const hexNew = Array.from(new Uint8Array(hashNew))
.map(b => b.toString(16).padStart(2, '0'))
.join('');
if (hexNew !== hash) throw new Error('Data integrity check failed');
return JSON.parse(data);
}前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
