选用 sessionStorage 临时保存手机号最安全实用——它仅限当前标签页、关页即清除、不发往服务端；而 localStorage 持久易复用，Cookie 易暴露，内存变量刷新即失。
在多步认证流程中，用 sessionStorage 临时保存用户输入的手机号是安全且实用的做法——它仅在当前浏览器标签页生命周期内有效，关闭标签即自动清除，避免敏感信息残留。
为什么选 sessionStorage 而不是 localStorage 或 Cookie？
sessionStorage 的作用域严格限定于当前页面会话（同一标签页），不跨标签共享，也不随请求发送到服务器，天然适合多步表单中的中间状态。相比之下：
-
localStorage持久化存储，关页后仍存在，存在误用或未清理导致旧号码被复用的风险； - Cookie 会自动携带在每次 HTTP 请求中，增加暴露风险，且需处理 HttpOnly、Secure 等安全配置；
- 内存变量（如全局 JS 变量）在页面刷新后即丢失，无法支撑“输入手机号 → 发送验证码 → 输入验证码”这类跨步骤流程。
在多步流程中写入和读取手机号的典型操作
假设流程分三步：1）输入手机号页（/auth/step1）→ 2）验证码发送页（/auth/step2）→ 3）验证码校验页（/auth/step3）。可在第一步提交时存入，后续步骤按需读取：
- 存入（Step1 提交后）：
sessionStorage.setItem('tempPhone', phoneNumber.trim()); - 读取（Step2 或 Step3 中）：
const phone = sessionStorage.getItem('tempPhone'); - 校验是否存在（避免跳过第一步直接访问后续页）：
if (!phone) { window.location.href = '/auth/step1'; } - 成功认证后主动清理（推荐）：
sessionStorage.removeItem('tempPhone');
注意边界情况与安全细节
sessionStorage 本身不加密，仅防“意外残留”，不能替代服务端校验：
- 手机号必须在每一步都由后端再次验证（例如 Step3 校验时，服务端需比对本次提交的验证码是否对应该手机号的最新发送记录）；
- 不要将 session ID、token 或验证码本身存入 sessionStorage（应由后端签发并校验）；
- 若用户新开标签页访问 Step2，
sessionStorage为空，需引导回第一步——这是预期行为，不是 bug； - 移动端 Safari 在某些 iOS 版本中，无痕模式下可能限制 sessionStorage，建议降级 fallback 到内存缓存 + 显式提示重新输入。
配合表单体验优化的小技巧
提升用户感知与容错性：
- Step2 页面顶部显示 “正在为 138****1234 发送验证码”，从 sessionStorage 读取并脱敏展示；
- Step1 表单提交前校验手机号格式，避免无效值写入；
- 用户点击“换号”时，同步调用
sessionStorage.removeItem('tempPhone')并跳转回 Step1； - 利用
beforeunload事件提示用户“尚未完成验证，关闭页面将丢失手机号”，增强引导（非强制阻止）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
