是否可以在浏览器中本地编辑文本区域并保存更改后的HTML文件?
我有一个疯狂的想法,就是有一个简单的文件是否可以在浏览器中本地编辑文本区域并保存更改后的HTML文件?,html,Html,我有一个疯狂的想法,就是有一个简单的文件.html,里面有可以编辑的文本区域,但我不想有一个数据库或任何后端,只有这一个文件,能够在浏览器中打开它,在浏览器中添加文本并以某种方式保存它……没有后端和数据库,这可能吗 这是一个简单的例子: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
.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>
测验
在w3schools.com,您将学习如何创建网站。我们提供所有web开发技术的免费教程。
我想要的是能够将在Textarea中所做的更改保存为永久性的,这样当我复制该.htm文件时,这些更改应该存在于该htm文件的源代码中。在HTML5中,您可以使用本地存储来保存数据 localStorage对象存储的数据没有过期日期。这个 关闭浏览器时,数据不会被删除,而是会被删除 可在第二天、第二周或第二年使用 使用javascript中的以下示例存储和检索数据:
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
可以使用
contenteditable
属性动态编辑HTML文件,也可以仅从浏览器的web检查器编辑HTML文件
要保存页面,可以使用localStorage
或其他机制将其保存在计算机上
甚至可以创建一个在浏览器中工作的简单文本编辑器,只需转到以下URL:data:text/html,
您可以查看这篇博文以了解更多信息:(我是作者)看起来,只要使用浏览器
将页面另存为…
(或类似名称)功能就可以做到这一点,该功能通常可以通过CTRL+S轻松访问
试试这个:
- 创建一个非常简单的
文件,其中包含一些具有.html
属性的元素contenteditable
- 在浏览器中打开该文件
- 在浏览器中更改可编辑元素的内容
- 按CTRL+S并将文件保存到自身上
- 重新加载页面或重新打开同一文件
- Chrome 60,Windows
- 歌剧院47,窗户
- Firefox 55、Windows和OSX
- Edge 40,Windows(同时,打开本地文件也非常重要)
- 铬60,OSX
- Safari版本10.1.2(12603.3.8)
- 歌剧院47号,OSX
.html
文件中执行的更改保存到同一个文件中,因此,用另一个浏览器或纯文本编辑器打开它将显示这些更改。@domsson oh thanx,用于澄清这是非常有趣的!(关于OP的问题)真正有趣的是,至少在Chrome中,你可以点击ctrl+s
,将编辑的内容保存到一个文件中,当再次加载到浏览器中时,该文件将显示执行的编辑。我花了一段时间才意识到这一点。。。有趣的是,我们的大脑有时是如何工作的该死的,它不起作用了……我现在刚测试过(它保存了HTML文件,但没有保存我所做的更改。你用什么浏览器测试了它?我在Windows中的Opera和Chrome上试用了它,似乎效果很好。在Chrome中…我从Textarea中删除了文本并编写了其他内容并保存了文件,但在保存的文件中,源代码与原始文件中的源代码相同。没有更改。现在我看到了我希望它能像我希望的那样工作……我认为这是不可能的。但在Firefox中它能工作!!!嘿……这太疯狂了。顺便说一句,我在iMAC上,可能是因为不同的操作系统。