不能在HTML在线运行环境（如JSFiddle、CodePen）中安全实现敏感代码加密存储，因其不满足Web Crypto API要求的安全上下文（https/localhost），且iframe沙箱、动态脚本注入等导致crypto.subtle不可用或密钥泄露风险极高。
不能在 HTML 在线运行环境（如 JSFiddle、CodePen、JSBin）中安全实现敏感代码的加密存储——因为这些平台默认不满足 Web Crypto API 的基本运行前提，且存在不可控的执行上下文风险。
crypto.subtle 为什么在在线编辑器里直接报错或为 undefined
这不是你的代码问题，而是环境被拒绝了。Web Crypto API 要求页面必须运行在「安全上下文」中：https:// 或 localhost；而绝大多数在线运行环境使用的是 https://fiddle.jshell.net/ 这类子域名嵌套 iframe，或通过 data: / about:blank 加载代码，导致 window.crypto?.subtle 为 undefined，调用时静默失败或抛出 SecurityError: The operation is insecure.。
- JSFiddle 默认用 sandboxed iframe 加载运行结果，
crypto.subtle被禁用（即使主页面是 HTTPS） - CodePen 的 “Debug View” 是独立 HTTPS 页面，但其 “Editor” 模式仍受限于父帧策略
- 任何依赖
eval()、Function()或动态 script 注入的运行环境，都会破坏密钥内存隔离，使密钥可能被同页脚本提取
如果硬要在在线环境“模拟”加密流程，必须绕过哪些关键限制
只能用于教学演示或本地调试，绝不可用于真实敏感数据。你得手动补全被截断的安全链：
- 用
console.log(window.crypto?.subtle)确认是否可用；若为undefined，立刻放弃，不要尝试 polyfill 或降级到 CryptoJS - 密钥不能用
generateKey()—— 在线环境常禁用该方法；改用importKey("raw", keyBytes, ...)，其中keyBytes必须由你预先生成（比如用 Node.js 的crypto.randomBytes(32)），再硬编码为Uint8Array字面量（仅限 demo） -
TextEncoder和ArrayBuffer转换必须显式写全：不能跳过encoder.encode(str).buffer直接传字符串给encrypt()，否则 Promise 会 reject - IV 必须每次调用都重生成：
crypto.getRandomValues(new Uint8Array(12))；在线环境若禁用该 API，就只能用固定 IV（仅限验证流程，实际等于裸奔）
localStorage.setItem() 存的是密文，但解密时总失败？检查这三点
加密后存进 localStorage 看似简单，但解密失败几乎总是因为序列化/反序列化环节出错：
立即学习“前端免费学习笔记（深入）”；
- 加密返回的是
ArrayBuffer，不能直接JSON.stringify()—— 会变成空对象{}；必须先转成 Base64：btoa(String.fromCharCode(...new Uint8Array(buffer)))，或更健壮地用arrayBufferToBase64工具函数 - IV 和密文必须一起存，推荐结构：
{ iv: "base64", data: "base64" }；只存data，解密时拿不到 IV，必然失败 - 解密前的 Base64 解码必须还原为
Uint8Array，再用.buffer提取 ArrayBuffer；漏掉任一转换步骤，decrypt()会静默返回空或 throw TypeError
真正安全的加密存储，必须控制执行环境、密钥生命周期和数据落地路径。在线运行环境连最基本的「密钥不被同页脚本读取」都无法保证，所谓“加密”只是制造了虚假安全感。如果你需要临时测试逻辑，用本地 http://localhost:8000 启一个静态服务，比任何在线编辑器都可靠。
