【发布时间】：2023-03-20 10:53:01
【问题描述】：
我希望在与 html 页面交互后能够保存它的状态。
假设我点击了一个复选框，或者 javascript 设置了各种元素的值。
如何保存“javascript-rendered”页面？
谢谢。
【问题讨论】：
标签： javascript html state save
【发布时间】：2023-03-20 10:53:01
【问题描述】：
document.body.innerHTML 将为您提供当前文档正文的 HTML 表示。
这不一定包括 DOM 对象的所有内部状态，因为 HTML 包含对象的初始默认状态，不一定是它们可能已更改为的状态。保证您获得所有状态的唯一方法是列出您想要保存的状态并实际以编程方式获得该状态。
要回答关于保存它的部分问题，您必须更多地描述您真正想要解决的问题。
【讨论】：
-
酷...但是我需要一种方法来保存它，对吗？那么我应该创建一个将 document.body.innerHTML 复制到剪贴板的小书签吗？
-
@user420667 - 你必须描述更多关于你真正想要解决的问题才能进一步回答。
-
问题：我访问了一个网页，我想保存它和它的状态）在我与它交互之后。
-
@user420667 - 保存它用于什么目的？你打算用保存的版本做什么？如果您告诉我们真正的最终目标是什么，我们可以提供更好的帮助。毕竟，如果只是想再看一遍，截图或者打印页面可能是最万无一失的保存方式。我通过在浏览器中执行“文件/另存为”将数字收据保存到硬盘上。有很多不同的保存方法，具体取决于您以后想用它做什么。
-
我想再次加载它。或者用html填写表格，并将其转换为pdf。不管是什么目的，都有很多。
应该这样做并且会抓取所有页面，而不仅仅是正文
console.log(document.getElementsByTagName('html')[0].innerHTML);
【讨论】：
-
这可能更好，但同样，问题在于保存它。它可能需要一个小书签吗？
-
取决于你想保存它的位置，你可以将它分配给一个变量，做一个 ajax 调用并将它保存在数据库或文件中。
-
但这一切都需要我将脚本注入页面，不是吗？
-
不，您可以将其保存为字符串，或者如果您必须保存为 DOM 元素，您可以创建文档片段或其他元素以便将其存储，然后您可以将其作为正常横向移动，即使它不会“注入”到您的页面中。因此，从技术上讲，您可以抓取所有页面，将其删除，重新绘制一个并带上您拥有的任何旧页面。理论上，跨浏览器明智之后可能会出现问题。
-
@user420667 您可以通过在查询字符串中获取信息并通过服务器端呈现它们来做到这一点。假设页面 url 类似于 foo.com/sex=male&age=120&type=developer。这可能是不好的做法，但它会为你工作，然后你不需要 javascript。
在 Chrome（显然是 Firefox）中，有一个特殊的 copy() 方法可以将渲染的内容复制到剪贴板。然后，您可以通过将其粘贴到您喜欢的文本编辑器来做任何您想做的事情。
https://developers.google.com/chrome-developer-tools/docs/commandline-api#copyobject
控制台示例：
copy(document.body.innerHTML);
注意：我注意到 Chrome 在方法运行后报告未定义，但是，它似乎执行正确并且正确的内容在剪贴板中。
【讨论】：
-
太棒了！我一直在寻找这个年龄。不知道为什么它没有被评为更高 - 这正是需要的。谢谢！
-
你救了我的命！
-
这简直太棒了。你也脱帽致敬。
-
undefined并不意味着没有定义该方法，而是说该方法返回了undefined它确实如此。 -
如果您使用
copy(document.documentElement.outerHTML);，您将获得包括<head>在内的整个HTML 页面（`DOCTYPE? 声明除外。
要获得相当于 view source 的 javascript 渲染，包括 doctype 和 html 标签，请将命令复制到 chrome 控制台：
console.log(new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML);
在 chrome 控制台中，将鼠标悬停在输出的末尾，然后单击复制链接以复制到粘贴板。
【讨论】：