代码之家 › 专栏 › 技术社区 › lewis4u

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

html

lewis4u · 技术社区 · 7 年前

.html 有了可以编辑的文本区域,但我不想有一个数据库或任何后端,只有这一个文件,并能够在浏览器中打开它,在浏览器中添加文本,并保存它以某种方式。。。。如果没有后端和数据库,这可能吗?

这是一个简单的例子:

<!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文件的源代码中。

3 回复 | 直到 7 年前

lewis4u 7 年前

看起来,只要使用浏览器就可以做到这一点 Save page as... CTRL键 S

创建一个非常简单的 .html 文件中包含具有 contenteditable 属性
在浏览器中打开该文件。
CTRL键 在自己身上 .
重新加载页面或重新打开同一文件。

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

在撰写本文时,这是 成功地

Chrome 60,Windows
Firefox 55、Windows和OSX

不保存更改:

铬60,OSX

Simone 7 年前

可以使用 contenteditable 属性,或仅从浏览器的web检查器中获取。

localStorage 或其他机制来保存它只在您的计算机上。

甚至可以创建一个在浏览器中工作的简单文本编辑器,只需转到以下URL即可: data:text/html,<html contenteditable></html>

https://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/ (我是作者)

Nirzar 7 年前

在里面 HTML5 本地存储 保存数据。

第二天、第二周或第二年可用。

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

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前