Question

我有一个疯狂的想法，有一个简单的文件.html与textareas可以编辑，但我不想有一个数据库或任何后端，只有这一个文件，并能够打开它浏览器和浏览器添加文本并以某种方式保存它....这可能没有后端和数据库吗？

这是一个简单的例子：

<!DOCTYPE html>

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Test</title>
</head>
<body>

<textarea rows="4" cols="50">
    At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>


</body>
</html>

我想要的是能够将Textarea中所做的更改保存为永久性，因此当我复制.htm文件时，那些更改应该存在于该htm文件的源代码中。

Answer 1

可以使用contenteditable属性动态编辑HTML文件，也可以直接从浏览器的网络检查员编辑。

要保存页面，您可以使用localStorage或其他机制将其保存在您的计算机上。

甚至可以创建一个在浏览器中运行的简单文本编辑器，只需转到此网址：data:text/html,<html contenteditable></html>

您可以查看此博文了解更多信息：https://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/（我是作者）

Answer 2

通过使用浏览器Save page as...（或类似命名的）功能，通常可以通过 CTRL + S

试试这个：

创建一个非常简单的.html文件，其中包含一些具有contenteditable属性的元素。
在浏览器中打开该文件。
从浏览器中更改可编辑元素的内容。
点击 CTRL + S 并将文件保存在自身。
重新加载页面或重新打开相同的文件。

您在浏览器中执行的更改应该在那里，也应该反映在其他编辑器或浏览器中。

但是，由于这是任何标准都未涵盖的浏览器功能，因此某些浏览器可能无法提供此功能或将文件保存为原始的未更改状态。此外，浏览器处理此问题的方式显然可能会发生变化。

在撰写本文时，已经使用这些浏览器/操作系统成功进行了测试：

Chrome 60，Windows
Opera 47，Windows
Firefox 55，Windows和OSX

不的浏览器/操作系统保存更改：

Edge 40，Windows（同样，打开本地文件也不重要）
Chrome 60，OSX
Safari版本10.1.2（12603.3.8）
Opera 47，OSX

Answer 3

在 HTML5 中，您可以使用本地存储空间来保存数据。

localStorage对象存储没有过期日期的数据。该浏览器关闭时，不会删除数据第二天，一周或一年可用。

在javascript中使用以下示例来存储和检索数据：

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

是否可以编辑textarea并在浏览器中本地更改保存HTML文件？

3 个答案: