localStorage 数据不会因关闭页面丢失，但仅限同域名且无法直接导出为HTML文件；完整保存需用Blob+download，注意DOCTYPE和编码；本地file://协议下JS请求会失败。
用 localStorage 保存数据，关掉页面就没了？
不是“保存为文件”，而是把数据存在浏览器里——localStorage 只在当前域名下可用，且不支持直接导出为 .html 文件。它本质是键值对存储，最大约 5–10MB（因浏览器而异），但内容纯文本，不能存 DOM 节点或函数。
常见错误：有人调用 localStorage.setItem('html', document.body.innerHTML) 后以为能还原整个页面，结果打开新标签页一试，样式丢失、脚本不执行、相对路径全错。
-
localStorage存的是字符串，得手动拼......才算完整 HTML - 外部 CSS/JS 链接不会自动下载，保存后离线打不开
- 如果页面用了
fetch或 WebSocket，这些状态无法被存下来
真要“保存为 .html 文件”，得靠 Blob + a.download
这是目前最可靠、兼容性好（Chrome/Firefox/Safari/Edge 均支持）、无需服务端的方法：把当前页面 HTML 字符串转成 Blob，再用带 download 属性的链接触发保存。
注意：不能直接用 document.documentElement.outerHTML —— 它漏了
立即学习“前端免费学习笔记（深入）”；
- 正确做法是拼完整的字符串：
"" + document.documentElement.outerHTML - 记得设置
Blob类型为"text/html;charset=utf-8"，否则中文可能乱码 -
a.download的文件名不能含路径，比如"./pages/export.html"会被忽略，只认"export.html"
const htmlStr = "" + document.documentElement.outerHTML;
const blob = new Blob([htmlStr], { type: "text/html;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "page-export.html";
a.click();
URL.revokeObjectURL(url);
保存带资源（CSS/JS/图片）的完整网页？别硬刚
想一键保存成“能双击打开、所有样式脚本都正常”的单文件？浏览器原生不支持。你看到的“网页存为 MHT”或“SingleFile 浏览器插件”，背后都是把资源 Base64 内联或打包进一个 HTML 里。
自己实现容易踩坑：图片跨域时 canvas.toDataURL() 报错；@import 的 CSS 不会被 document.styleSheets 直接暴露；动态加载的模块（如 import("/x.js")）根本没机会抓取。
- 简单页面可尝试用
document.styleSheets遍历，读cssRules拼内联样式，但遇到 CORS 就停住 - 图片建议用
fetch重新拉一次（需同源），再转 Base64；跨域图只能留外链或放弃 - 更稳的做法：别自己写，用已验证的库如
single-file-core（插件底层用的），或接受“仅保存 HTML 结构+内联关键样式”的妥协方案
本地打开保存的 HTML 文件，为什么 JS 报错或请求失败？
因为 file:// 协议下，浏览器默认禁用 fetch、XMLHttpRequest、localStorage（部分浏览器）、Service Worker，甚至 iframe 加载也会被拦。
这不是代码写错了，是安全策略。比如你保存的页面里有 fetch("/api/user")，本地双击打开时，地址栏显示 file:///xxx/page.html，此时所有相对路径请求都会变成 file:///api/user，404 是必然的。
- 调试阶段，用
npx serve或 Pythonpython -m http.server启个本地服务器，用http://localhost:XXXX访问 - 生产环境要保存可离线运行的页面，所有接口必须改造成 mock 数据，或把 API 响应结果也写死进 HTML
- 检查控制台报错是不是
Blocked loading resource from cross-origin iframe或Not allowed to load local resource，这说明你在file://下试图读取本地文件
真正难的从来不是“怎么点保存”，而是想清楚：你要存的是“快照”还是“可执行副本”——前者截图或 PDF 更靠谱，后者绕不开服务器或打包工具。
