如何保存 HTML 中的更改？

Posted 2023-05-07

【中文标题】如何保存 HTML 中的更改？

【英文标题】：How to save changes in HTML?

【发布时间】：2015-08-24 07:15:24

【问题描述】：

我知道如何将内容添加到当前加载到浏览器中的 html 文件中，现在我只想了解是否有办法将这些更改保存到 .html 文件本身。基本上，当文件关闭并稍后再次加载时，它应该仍然具有动态添加的内容。

【问题讨论】：

使用Server-side script 和database。

这是本地加载的文件（带有file://...）吗？

@Mr Lister ，是的。

@IndrasinhBihola 我不想在服务器上运行它。

【参考方案1】：

如果您需要存储更复杂/大量的数据，客户端也有indexedDB。无需为此编写服务器端脚本。

SessionStorage 和 LocalStorage 仅存储字符串，因此如果您需要存储对象，则必须先对其进行字符串化。但是，对于 indexedDB，它不会。

它比 sessionStorage 涉及更多（这里解释太多了），但是当我研究它时，这些链接帮助了我。

基本上你连接到数据库，处理任何需要的升级（这会处理第一次创建和设置事务），然后你得到你的对象存储，最后执行你的读取、更新等。大部分工作是数据库的设置和升级。

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API http://code.tutsplus.com/tutorials/working-with-indexeddb--net-34673

【参考方案2】：

您可以使用Session Storage。

window.onload = function () 
  if (sessionStorage.getItem("savedItem"))
    document.querySelector("#store").value = sessionStorage.getItem("savedItem");
  document.querySelector("#store").onkeyup = function (event) 
    if (event.keyCode == 13) 
      sessionStorage.setItem("savedItem", document.querySelector("#store").value);
      alert("Saved!");
    
  ;
;

<div sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
  <input type="text" id="store" placeholder="Type something and press Enter to save..." />
</div>

【讨论】：

感谢您的尝试，但这只会在页面保持打开或刷新时保存数据。我希望能够关闭页面并稍后打开它并且仍然有内容。

LocalStorage 将在选项卡或窗口关闭时持续存在。完全相同的 API。

【参考方案3】：

您不能仅使用 HTML 来做到这一点。将服务器端脚本语言（例如 php）与数据库（例如 mysql）一起使用。将您的页面内容存储在数据库中，并使用服务器端脚本将内容提供给您的 html 页面。

（也可以使用XML文件存储数据，不需要数据库）