选用 sessionStorage 缓存验证码唯一标识（如 captchaId）是安全且合理的做法，因其生命周期绑定标签页、避免跨标签干扰、自动清理且契合一次性验证语义；刷新时存入、提交时读取并传递该标识，配合前后端约定与异常处理，确保校验有效性。
图形验证码刷新时，用 sessionStorage 缓存校验唯一标识（如 captchaId 或 token）是常见且安全的做法——它保证标识仅在当前页面会话有效，关闭标签页即自动清除，避免跨标签干扰或长期残留。
为什么选 sessionStorage 而不是 localStorage？
sessionStorage 的生命周期与浏览器标签页绑定，天然适配验证码场景：
- 用户刷新页面或重新进入登录页时，旧标识自动失效，防止重复提交或回退重放；
- 同一域名下不同标签页互不共享，避免 A 标签页刷新验证码后，B 标签页仍拿着旧 ID 校验；
- 无需手动清理，比 localStorage 更省心、更符合“一次性验证”语义。
刷新验证码时生成并缓存唯一标识
后端生成验证码的同时，应返回一个唯一标识（如 UUID 或服务端生成的 token），前端立即存入 sessionStorage：
// 示例：请求新验证码
fetch('/api/captcha/refresh')
.then(res => res.json())
.then(data => {
// data.captchaId 是后端返回的唯一标识
if (data.captchaId) {
sessionStorage.setItem('captchaId', data.captchaId);
document.getElementById('captcha-img').src = data.imageUrl;
}
});
表单提交时携带缓存的标识
用户输入验证码并提交表单时，从 sessionStorage 读取并附带该标识，确保前后端一致：
立即学习“Java免费学习笔记（深入）”；
const formData = new FormData(form);
formData.append('captchaId', sessionStorage.getItem('captchaId') || '');
fetch('/api/login', {
method: 'POST',
body: formData
});
注意：提交后可选择性清除（非必须），因为标签页关闭时自动销毁；若需主动防重复提交，可在成功后调用 sessionStorage.removeItem('captchaId')。
异常情况处理建议
提升健壮性的小细节：
- 每次刷新验证码前，先清空旧值再写入新值，避免残留；
- 提交时检查
sessionStorage.getItem('captchaId')是否存在，不存在则拒绝提交并提示“请先获取验证码”； - 后端校验失败时，应明确返回错误码（如
400 CAPTCHA_EXPIRED），前端据此触发重新刷新流程，而非复用旧 ID。
不复杂但容易忽略：关键在于前后端约定好这个标识字段名和生命周期，前端只负责“取-传-丢”，后端负责“发-存-验-删”。
