Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/facebook/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
是否可以在浏览器中本地编辑文本区域并保存更改后的HTML文件?_Html - Fatal编程技术网

是否可以在浏览器中本地编辑文本区域并保存更改后的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

在哪里保存?其他访问者会看到这种变化吗?你可以使用浏览器的localstorage。我不知道你是什么意思,伙计,但如果它有助于将contenteditable=“true”attr添加到你想要编辑的元素中,没有访问者,这只适用于我在电脑上的本地存储。实际上,它应该保存到它本身中,有一个具有IDE功能的浏览器是个好主意:DNo这不是我想的方式…我希望它是永久的…所以当我打开.html文件时,编辑的文本应该在那里…我不确定这是否可能…所以实际上它应该像你按照w3school文档编辑.html文件源代码一样工作。。localStorage对象存储的数据没有过期日期。关闭浏览器时,数据不会被删除,并将在第二天、第二周或第二年可用。请检查以下链接:Nirzar,OP基本上希望将
.html
文件中执行的更改保存到同一个文件中,因此,用另一个浏览器或纯文本编辑器打开它将显示这些更改。@domsson oh thanx,用于澄清这是非常有趣的!(关于OP的问题)真正有趣的是,至少在Chrome中,你可以点击
ctrl+s
,将编辑的内容保存到一个文件中,当再次加载到浏览器中时,该文件将显示执行的编辑。我花了一段时间才意识到这一点。。。有趣的是,我们的大脑有时是如何工作的该死的,它不起作用了……我现在刚测试过(它保存了HTML文件,但没有保存我所做的更改。你用什么浏览器测试了它?我在Windows中的Opera和Chrome上试用了它,似乎效果很好。在Chrome中…我从Textarea中删除了文本并编写了其他内容并保存了文件,但在保存的文件中,源代码与原始文件中的源代码相同。没有更改。现在我看到了我希望它能像我希望的那样工作……我认为这是不可能的。但在Firefox中它能工作!!!嘿……这太疯狂了。顺便说一句,我在iMAC上,可能是因为不同的操作系统。