Live Server 保存即刷新会丢失页面状态，因其仅重载HTML而非热更新；需用localStorage手动持久化数据，或改用Vite/webpack dev server实现HMR。
Live Server 保存即刷新，但页面状态仍丢失？
VSCode 用 Live Server 插件确实能自动刷新网页，但它只是重新加载整个 HTML 文档——相当于每次按 F5，所有 JS 内存状态（比如表单输入、Vuex store、React 组件的 useState）都会被清空。这不是插件问题，而是浏览器默认行为。
- 刷新 = 新建一个渲染进程 + 重执行全部脚本，旧 JS 堆内存直接丢弃
-
Live Server不做热更新（HMR），它不接管模块生命周期 - 如果你依赖本地存储的数据，得手动写逻辑：用
localStorage或sessionStorage持久化关键字段
例如表单内容想保留：
const input = document.getElementById('name');
input.value = localStorage.getItem('form-name') || '';
input.addEventListener('input', () => {
localStorage.setItem('form-name', input.value);
});
想保留状态又不用改代码？试试 Chrome 的“保留日志”+ 禁用缓存
这不是 VSCode 的功能，但能快速绕过刷新清空的困扰：在 Chrome 开发者工具中启用 Preserve log 并勾选 Disable cache，再配合 Live Server 使用，可避免资源被强缓存干扰，同时让 console 日志不断连——方便你盯着状态变化，而不是反复看白屏重载。
-
Preserve log在 Network 或 Console 面板右上角三个点菜单里 -
Disable cache必须在 DevTools 打开状态下才生效，关闭后失效 - 注意：这不会阻止 JS 全局变量重置，只帮你更清晰地观察每次刷新前后的差异
真要热更新（HMR）？别靠 Live Server，换 Vite 或 Webpack Dev Server
Live Server 是静态服务器，不解析模块、不注入 HMR 客户端代码。想改一行 JS 就局部更新组件且不丢状态，必须用现代构建工具。
- Vite 启动后访问
http://localhost:5173，改.vue或.tsx文件，DOM 节点会原地替换，useState/ref值默认保留 - Webpack 需配
hot: true和react-refresh插件，配置门槛高，适合老项目迁移 - 两者都要求你写标准模块导入（
import），Live Server 加载的脚本是全局作用域，不满足 HMR 前提
误删文件后自动刷新？检查是否启用了“保存时自动格式化+保存时删除末尾空格”组合
有些用户反馈“一保存就丢文件”，其实不是刷新导致，而是编辑器配置触发了副作用。比如 editor.formatOnSave + files.trimTrailingWhitespace + 某些 Prettier 或 ESLint 插件，在保存瞬间重写文件内容，若配置不当（如匹配了 .html 但规则含 removeEmptyLines），可能意外清空 body。
- 检查设置中是否启用了
files.trimTrailingWhitespace或editor.removeTrailingWhitespace - 禁用所有格式化扩展，仅留
Live Server，测试是否还出现“消失”现象 - 查看 VSCode 右下角状态栏，保存时如果显示“Formatting…”或“ESLint fixing…”，说明有后台写入动作
真正难察觉的是：某些插件会在保存后异步调用 fs.writeFile，而你刚好在那一刻刷新页面，误以为是刷新导致文件没了——其实是写入失败或覆盖为空。
