浏览器原生可恢复input内容，需满足有name属性、非password类型且未设autocomplete="off"等禁用值；否则需用sessionStorage配合DOM加载时机手动实现。
页面刷新后怎么让 input 恢复上次输入内容
靠浏览器原生行为就能做到，不用 JS 也能回填——前提是用户没禁用表单自动填充，且没手动清空历史。Chrome、Edge、Firefox 都支持对 <input type="text">、<textarea> 等常见控件自动恢复上次值，但有两个硬性条件：必须有 name 属性，且不能是 type="password" 或带 autocomplete="off"。
常见错误现象：加了 value="" 或用 JS 清空再设空字符串，反而破坏了浏览器的自动恢复逻辑；或者用了 id 但没写 name，导致完全不触发。
-
name值要稳定，别用动态生成的随机字符串（比如name="search_12345"），否则每次刷新都被当新字段处理 - 避免在 HTML 中写
value属性（哪怕为空），它会覆盖浏览器缓存的值 - 如果页面走的是 POST 后重定向（PRG 模式），浏览器通常不会恢复，因为地址栏 URL 已变
autocomplete="on" 和 "off" 到底管不管用
它只影响浏览器是否主动提示或填充，不影响已输入内容的页面级恢复。也就是说：autocomplete="off" 不会阻止刷新后回填，但可能让下拉建议消失；而 autocomplete="on" 是默认值，显式写上也没额外效果。
真正干扰恢复的是 autocomplete="new-password" 或 autocomplete="one-time-code" 这类语义化值，它们会明确告诉浏览器“别记这个”，导致回填失效。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 想保留恢复能力，就别给
autocomplete赋值为"off"以外的特殊语义值 - 密码框即使写了
autocomplete="current-password"，也不会恢复明文输入（安全限制），但普通文本框不受此限 - 某些老版本 Safari 对
autocomplete解析较松，乱写可能意外禁用恢复
用 JS 主动读写 sessionStorage 实现更可控的回填
浏览器原生恢复不可靠时（比如跨设备、隐私模式、或需要保留更多字段状态），就得自己存。最轻量方案是监听 input 事件，把值存在 sessionStorage，页面加载时读取并赋值。
关键点在于时机：必须等 DOM 加载完成、元素存在后再读取，否则 getElementById 找不到节点；而且要检查 sessionStorage 里是否有对应键，避免报错。
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('search');
if (input && sessionStorage.getItem('search_value')) {
input.value = sessionStorage.getItem('search_value');
}
input.addEventListener('input', () => {
sessionStorage.setItem('search_value', input.value);
});
});
- 键名（如
'search_value'）要和 input 的id或业务含义强关联，避免冲突 - 不要用
localStorage替代，除非真需要关掉页面也保留——它会一直存，容易积攒脏数据 - 如果页面有多个相似 input（比如搜索框+筛选框），得为每个分配独立 key，不能共用一个
Vue/React 等框架里为什么回填经常失效
因为框架接管了 DOM 更新，直接改 input.value 不触发响应式更新，或组件挂载时还没拿到缓存值。比如 Vue 的 v-model 绑定变量初始为空，就算 sessionStorage 里有值，也不会自动同步过去。
解决思路不是绕开框架，而是把缓存读取逻辑放进组件初始化阶段，并确保响应式变量被正确赋值。
- Vue 3
setup()中，用onMounted读sessionStorage，再赋给ref - React 函数组件用
useEffect(() => { ... }, [])，且注意别在渲染时直接读（会触发 hydration mismatch） - 千万别在框架绑定前用原生 JS 改
value，会导致框架认为受控状态被破坏，后续输入异常
