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

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

html

lewis4u · 技术社区 · 8 年前

.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 回复 | 直到 8 年前

lewis4u 8 年前

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

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

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

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

Chrome 60,Windows
Firefox 55、Windows和OSX

不保存更改:

铬60,OSX

Simone 8 年前

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

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

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

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

Nirzar 8 年前

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

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

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

11 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

11 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

11 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

11 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

12 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

12 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前