刷新后值丢失是正常行为，因浏览器默认不持久化其value；需用localStorage手动保存恢复，注意格式为YYYY-MM-DD、空值校验及框架受控组件同步。
input type="date" 刷新后值丢失是正常行为
浏览器默认不会持久化 的值，页面刷新或重新加载后，value 会被清空（除非你显式设置了初始值）。这不是 bug，而是规范行为——HTML 表单控件本身不带本地存储逻辑。
用 localStorage 手动保存和恢复 value
最直接可靠的方案是监听 input 或 change 事件，把用户选中的日期存进 localStorage，页面加载时再读出来赋给 value。注意必须确保日期格式为 YYYY-MM-DD（这是 input[type=date] 唯一接受的字符串格式）。
实操建议：
- 在
上绑定change事件（比input更稳妥，避免频繁写入） - 存值前检查
event.target.value是否非空，空字符串不要覆盖已有存储 - 页面加载后，先查
localStorage.getItem('lastDate')，有值再设input.value = ...，并触发input事件以通知框架（如 Vue/React 受控组件需额外处理） - 示例关键代码：
const dateInput = document.querySelector('input[type="date"]');<br>const saved = localStorage.getItem('lastDate');<br>if (saved) dateInput.value = saved;<br><br>dateInput.addEventListener('change', () => {<br> if (dateInput.value) localStorage.setItem('lastDate', dateInput.value);<br>});
Vue/React 中要注意受控与非受控切换
在框架中直接操作 input.value 容易引发警告或状态不一致。比如 Vue 的 v-model 绑定后，再手动改 input.value 会破坏响应式链；React 中若用了 value={date} 却没同步更新 state，输入框就变成只读。
正确做法：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- Vue：用
mounted读取 localStorage 并赋给 data 属性，v-model绑定该属性，@change里更新 localStorage 和 data - React：在
useEffect(() => {...}, [])中初始化 state，用onChange同步更新 state 和 localStorage - 不要绕过 state 直接操作 DOM 的
value，否则下次 re-render 会被框架值覆盖
兼容性与边界情况要兜底
localStorage 在无痕模式、Safari 私密浏览或禁用 Cookie 的场景下可能抛出 QuotaExceededError 或静默失败。日期格式错误（如传入 2023/01/01）会导致赋值无效但无报错。
建议加一层保护：
- 用
try/catch包裹localStorage.setItem - 对读取的日期字符串做简单校验：
/^\d{4}-\d{2}-\d{2}$/.test(saved)，不匹配就忽略 - 服务端渲染（SSR）场景下，首次 hydration 前 DOM 已存在，需在客户端 mount 后再恢复值，避免服务端和客户端值不一致触发 React 警告
真正容易被忽略的是：用户手动清空输入框（删掉所有字符）后，change 事件仍会触发，此时 input.value 是空字符串，若不判断就存进去，下次打开就永远显示空——这个空值会覆盖掉之前的有效选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
