input 的 value 属性仅设初始值，刷新后丢失；持久回显需 js 结合 localstorage 在页面加载时读取、blur 时写入，并为每个 input 分配唯一 key。
input 标签本身不保存数据，回显必须靠 JavaScript 主动读写 localStorage 或 sessionStorage；直接靠 HTML 属性（如 value）无法实现“上次输入内容自动出现”
为什么 input 的 value 属性不能自动回显历史值
HTML 渲染时 value 是静态快照，页面刷新后就丢失；即使你写 <input value="上次填的">，也只是初始值，不是“记住用户上次输的内容”。真正要持久化，得用 JS 把用户输入存进 localStorage，再在页面加载时取出来赋给 input.value。
常见错误现象：
– 页面刷新后输入框空了，但用户期望保留
– 多个 input 共用同一个 key，互相覆盖
– 没做防抖或事件节流，频繁写入导致性能下降
- 只应在
input的change或blur事件中存值（避免每敲一个字都写 localStorage） - 为每个
input分配唯一 key，比如用id或name拼接：localStorage.setItem('search-input-value', input.value) - 首次加载时检查 key 是否存在，存在则赋值：
if (localStorage.getItem('search-input-value')) { input.value = localStorage.getItem('search-input-value'); }
如何用 localStorage 实现搜索框输入内容自动回显
这是最典型也最容易出错的场景：用户输入关键词、离开页面、再回来，希望输入框里还是上次的词。关键不是“存”，而是“什么时候读 + 什么时候写”。
使用场景：
– 搜索页、登录页、表单草稿（非敏感字段）
– 不需要服务端同步，纯前端本地记忆
- 监听
input的blur事件写入（比input事件更轻量，避免高频触发） - 页面
DOMContentLoaded后立即读取并填充：document.getElementById('search').value = localStorage.getItem('search-term') || '' - 如果用户清空了输入框并失焦，也要同步清除 localStorage：
if (!input.value.trim()) localStorage.removeItem('search-term'); - 注意大小写和空格处理：存之前统一
.trim().toLowerCase()，避免“hello ”和“hello”被当成两条不同记录
sessionStorage 和 localStorage 在回显中的实际差异
二者 API 完全一致，但生命周期和作用域不同，选错会导致“明明存了却读不到”。
参数差异：
– localStorage：关闭标签页也不丢，跨标签页共享（同源）
– sessionStorage：仅当前标签页有效，关掉就清空
性能 / 兼容性影响：
– 都是同步阻塞操作，大数据量（>5MB）可能卡 UI（但普通文本输入完全无压力）
– 所有现代浏览器都支持，IE10+ 起就稳定可用
- 登录表单的用户名可存
localStorage，方便下次打开直接显示 - 多步骤表单的中间页数据建议用
sessionStorage，防止用户开多个标签页互相干扰 - 不要存密码、token 等敏感信息 —— localStorage 是明文可读的，且没有访问控制
表单提交后清空本地存储的时机与风险
用户点“提交”后，是否该立刻删掉 localStorage 中对应字段？答案不是绝对的，取决于业务逻辑。
容易踩的坑：
– 提交失败（网络中断、校验不通过），结果把用户刚输的内容清掉了
– 表单有“暂存草稿”按钮，但代码把所有字段都清空了
- 推荐做法：只在收到后端成功响应（HTTP 2xx）后再调用
localStorage.removeItem() - 如果表单支持“保存草稿”，应另设一套 key，比如
'draft-xxx'，和正式提交用的 key 分开 - 对必填字段，可在提交前检查
localStorage是否为空，避免用户误以为已填而直接提交空值
真正的难点不在怎么写那几行 setItem 和 getItem，而在于判断“这个输入值到底该不该存、存多久、和谁共享”。一不留神，就变成用户换台电脑登录后发现“历史记录不见了”，或者同事共用一台测试机时互相看到对方搜过的词。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
