SessionStorage适合临时保存验证码状态数据，如是否已发送、倒计时剩余秒数、有效期等，仅在当前标签页有效，关闭即清空，天然契合验证码一次性、短时效特性；可存发送时间戳、手机号标识、倒计时初始值，并配合前端倒计时同步更新与自动清理。
SessionStorage 适合临时保存验证码状态数据，比如是否已发送、倒计时剩余秒数、验证码有效期等，仅在当前浏览器标签页生命周期内有效，关闭即清空，天然契合验证码的一次性、短时效特性。
存储验证码基础状态
用户点击“获取验证码”后，可将关键状态写入 sessionStorage，避免重复提交或频繁请求：
-
发送时间戳：记录触发发送的时间（
Date.now()），用于后续计算倒计时和校验是否超时 -
手机号/邮箱标识：作为本次验证码的绑定凭证（如
"verify:138****1234"），防止跨账号误用 - 倒计时初始值：例如 60 秒，配合前端定时器使用，不依赖服务端返回的过期时间字段（除非需强一致）
示例代码：
const phone = '138****1234';
const key = `verify:${phone}`;
sessionStorage.setItem(key, JSON.stringify({
sentAt: Date.now(),
countdown: 60,
expired: false
}));
读取并校验验证码有效性
用户输入验证码前，可先检查 sessionStorage 中对应状态是否合法：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 是否存在该 key；若不存在，说明未请求或已失效，应禁止提交
- 解析内容后判断
expired === true或Date.now() - sentAt > 5 * 60 * 1000（如 5 分钟有效期），则视为过期 - 倒计时为 0 且未重发时，可自动标记
expired = true并清除，提升体验
注意：服务端仍必须独立校验验证码（时间窗口、次数限制、正确性），sessionStorage 仅作前端友好提示，不可替代后端验证。
配合倒计时与清理逻辑
前端倒计时需与 sessionStorage 同步更新，同时确保页面刷新后能恢复状态：
- 初始化时从 sessionStorage 读取，若存在且未过期，则启动剩余秒数的倒计时
- 每秒更新 sessionStorage 中的
countdown字段（避免仅靠内存变量丢失） - 倒计时结束或用户完成验证后，主动调用
sessionStorage.removeItem(key)清理，避免残留无效数据
小技巧：可在 beforeunload 事件中做一次清理，但非必需，因 sessionStorage 本身随标签页关闭自动销毁。
与 LocalStorage 的关键区别提醒
不要误用 LocalStorage 存储验证码状态：
- LocalStorage 持久化保存，即使关闭浏览器再打开仍存在，易导致“旧验证码仍被前端认为有效”的安全错觉
- 多个标签页共享 LocalStorage，可能引发状态冲突（如 A 标签页请求了验证码，B 标签页误读并提交）
- SessionStorage 隔离性好、生命周期明确，是更安全、更符合语义的选择
不复杂但容易忽略。
