如何用JavaScript实现本地存储加密

在前端开发中，localStorage、sessionStorage这类本地存储方案常被用来保存用户偏好、临时状态等数据，但默认的存储方式是明文，一旦页面被XSS攻击或者用户查看本地存储内容，敏感信息就会直接泄露。用JavaScript对本地存储的内容做加密处理，就能有效降低这类风险。

本地存储加密的基本思路

本地存储加密的核心逻辑是：写入数据前先对原始内容做加密处理，把加密后的字符串存入本地存储；读取数据时先从本地存储取出加密字符串，再做解密还原成原始内容。整个过程需要保证加密和解密使用相同的密钥，同时密钥不能明文暴露在代码中。

选择加密方案

前端场景下推荐使用对称加密，因为加解密速度快，实现简单。常用的对称加密算法有AES，现代浏览器内置的Web Crypto API已经支持AES-GCM模式，不需要额外引入第三方库，还能避免第三方库带来的体积和安全风险。

基于Web Crypto API的实现步骤

下面以AES-GCM算法为例，给出完整的加密存储实现代码，包含密钥生成、加密、解密、本地存储读写四个核心部分。

1. 生成加密密钥

首先需要从用户相关的信息或者随机值生成固定密钥，这里演示用随机值生成并暂存密钥的方式，实际项目中可以把密钥和用户的登录态绑定，避免密钥硬编码。

// 生成AES-GCM加密密钥，返回CryptoKey对象
async function generateKey() {
  return await window.crypto.subtle.generateKey(
    {
      name: "AES-GCM",
      length: 256, // 密钥长度256位
    },
    true, // 密钥是否可提取
    ["encrypt", "decrypt"] // 密钥用途：加密、解密
  );
}

2. 实现加密函数

加密时需要生成随机的初始化向量（IV），IV不需要保密，可以和加密后的数据一起存储。

// 加密原始数据，返回加密后的字符串（IV和密文拼接后转base64）
async function encryptData(key, data) {
  // 生成12字节的随机IV，AES-GCM推荐IV长度为12字节
  const iv = window.crypto.getRandomValues(new Uint8Array(12));
  // 把原始数据转成Uint8Array
  const encoder = new TextEncoder();
  const dataBuffer = encoder.encode(data);
  // 执行加密
  const encryptedBuffer = await window.crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv: iv,
    },
    key,
    dataBuffer
  );
  // 把IV和密文拼接，再转成base64字符串方便存储
  const combined = new Uint8Array(iv.length + encryptedBuffer.byteLength);
  combined.set(iv);
  combined.set(new Uint8Array(encryptedBuffer), iv.length);
  return btoa(String.fromCharCode(...combined));
}

3. 实现解密函数

解密时需要先从存储的字符串中提取IV和密文，再做解密还原。

// 解密存储的加密字符串，返回原始数据
async function decryptData(key, encryptedStr) {
  // 把base64字符串转成Uint8Array
  const combined = Uint8Array.from(atob(encryptedStr), c => c.charCodeAt(0));
  // 提取前12字节作为IV
  const iv = combined.slice(0, 12);
  // 剩余部分是密文
  const ciphertext = combined.slice(12);
  // 执行解密
  const decryptedBuffer = await window.crypto.subtle.decrypt(
    {
      name: "AES-GCM",
      iv: iv,
    },
    key,
    ciphertext
  );
  // 转成原始字符串返回
  const decoder = new TextDecoder();
  return decoder.decode(decryptedBuffer);
}

4. 封装本地存储读写方法

把加密解密和本地存储操作封装成统一的方法，使用起来更方便。

// 加密存储到localStorage
async function setEncryptedStorage(keyName, data, cryptoKey) {
  const encrypted = await encryptData(cryptoKey, data);
  localStorage.setItem(keyName, encrypted);
}

// 从localStorage读取并解密
async function getEncryptedStorage(keyName, cryptoKey) {
  const encrypted = localStorage.getItem(keyName);
  if (!encrypted) return null;
  return await decryptData(cryptoKey, encrypted);
}

使用示例

下面是完整的调用示例，演示存储和读取用户敏感信息的过程。

// 初始化密钥（实际项目中可以只生成一次，后续复用）
async function init() {
  const storageKey = await generateKey();
  // 存储敏感数据
  await setEncryptedStorage("user_token", "test_secure_token_123", storageKey);
  // 读取并解密数据
  const token = await getEncryptedStorage("user_token", storageKey);
  console.log("读取到的原始数据：", token); // 输出 test_secure_token_123
}

init();

注意事项

• 密钥管理是核心，不要直接把密钥写在代码里，最好和用户的登录态、设备信息绑定，避免密钥泄露后所有数据都能被解密。
• AES-GCM本身能防篡改，如果加密后的数据被修改，解密时会直接报错，不需要额外做校验。
• 本地存储的容量有限，加密后的数据会比原始数据略大，不要存储过大的内容。
• 这种加密只能防止本地存储内容被直接查看，无法防御XSS攻击获取运行时的解密数据，所以还是要做好XSS防护。

如果是需要兼容旧浏览器的场景，也可以引入轻量的第三方加密库，但优先推荐使用浏览器内置的Web Crypto API，安全性和性能都更有保障。

JavaScript本地存储加密Web_Storage修改时间：2026-06-03 00:36:22