如何保存使用Javascript/jQuery在浏览器（DOM）上修改的html

首先让我澄清一下，我正在尝试做的只是本地使用，用户将直接访问html页面。如何保存使用Javascript/jQuery在浏览器（DOM）上修改的html

我想要做的是基本上追加并保存文本到HTML文件。

这就是我所拥有的。

HTML（的index.html）

<div id="receiver"></div> 
<button id="insertButton">Insert</button>

$(document).ready(function() { 
    $('#insertButton').click(function(){ 

     $('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>'); 
    }) 
});

我不知道的是如何将追加后的文件（index.html的）保存。任何想法如何做到这一点？这甚至可以使用JavaScript或jQuery？

来源

2014-11-01 fs_tigre

您需要将编辑后的文件保存在服务器上？你只能用javascript才能做到这一点 - 你需要一个服务器端语言。 – 2014-11-01 13:47:04

你可以给id为 tag 然后在附加内容后你可以得到html ...你将无法在服务器上保存（如果你正在执行，因为它正在执行在客户端机器上），你可以使用这样的东西.. http://stackoverflow.com/questions/4439296/save-or-download-javascript-string-as-a-file ..在我看来.. 也保存在服务器上或使用PHP下载后，只需在附加内容后，您可以使ajax调用服务器的PHP页面...希望它可以帮助... – Ahmad 2014-11-01 13:48:02

不，这不会被托管在服务器中。仅限本地驱动器。 – 2014-11-01 13:54:55

-1

不需要任何JavaScript。添加html后，只需按Ctrl + S即可在本地保存文件用修改html。

来源

2014-11-01 13:44:13

afaik它会保存加载的内容不是动态添加的内容...正确如果我错了... – Ahmad 2014-11-01 13:45:03

我不喜欢这种方法是事实，你需要指定名称和位置，每次保存（ CTRL + S）。谢谢 – 2014-11-01 13:50:33

如果我的理解正确，您需要在本地计算机上进行临时使用，那么您可以将它存储在Cookie中。因此，无论何时加载页面，检查cookie是否可用，如果是，则从cookie加载数据或加载新数据。除非和直到cookie未被清除，否则您可以使用此数据。

希望这有助于...

来源

2014-11-01 14:23:46 pravid

你可以改变你的处理程序要做到这一点：

$(document).ready(function() { 
    $('#insertButton').click(function(){ 

     $('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>'); 

     // Save the page's HTML to a file that is automatically downloaded. 

     // We make a Blob that contains the data to download. 
     var file = new window.Blob([document.documentElement.innerHTML], { type: "text/html" }); 
     var URL = window.webkitURL || window.URL; 

     // This is the URL that will download the data. 
     var downloadUrl = URL.createObjectURL(file); 

     var a = document.createElement("a"); 
     // This sets the file name. 
     a.download = "source.htm"; 
     a.href = downloadUrl; 

     // Actually perform the download. 
     document.body.appendChild(a); 
     a.click(); 
     document.body.removeChild(a); 
    }) 
});

你应该看看兼容性列表和文件的URL了在MDN。值得注意的是，URL不适用于IE 9或更早版本。 Blob一样。

来源

2014-11-01 15:05:43 Louis

它在Chrome中工作。有没有一种方法可以指定URL的下载位置，并最终用新的URL覆盖现有的URL？谢谢 – 2014-11-01 18:47:36

“在哪里下载”。你是指在文件系统中它将被保存的位置？最好我们可以用'download'属性来建议一个文件名。最终，浏览器根据默认配置或提示用户决定将其保存在何处。浏览器决定在覆盖的情况下会发生什么。否则这将是一个安全漏洞。 “这是一个很好的小文件，可以下载为'〜/ .login'。” （如果你不熟悉* nix，那么允许这样的下载会很糟糕。） – Louis 2014-11-01 18:55:50

好吧，显然，由于合理的限制（安全性），Javascript并不是我想要完成的任务的正确技术。我想修改和保存文件，就像它是一个在线或桌面应用程序一样。我会研究一些其他的选择。非常感谢你的帮助。 – 2014-11-02 14:33:45

如何保存使用Javascript/jQuery在浏览器（DOM）上修改的html

回答

相关问题