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

首先，让我澄清一下，我试图做的只是本地使用，用户将可以直接访问html页面

我试图做的基本上是将文本附加并保存到HTML文件中

这就是我所拥有的

HTML（index.HTML）

插入

JS

$（文档）.ready（函数（）{
$（“#插入按钮”）。单击（函数（）{
$（“#receiver”）.append（'Hi'，”你好吗？
）；
})
});

---

我不知道的是在追加后如何保存文件（index.html）。你知道怎么做吗？使用Javascript或jQuery也可以这样做吗？

不需要任何Javascript。附加html后，只需按Ctrl+S以使用修改后的html在本地保存文件。

如果我理解正确，您需要在本地计算机上使用该文件，临时使用时可以将其存储在cookie中。 因此，无论何时加载页面，检查cookie是否可用，如果可用，则从cookie加载数据或加载新数据。 您可以使用此数据，除非未清除Cookie

---

希望这对您有所帮助……

您可以更改处理程序以执行以下操作：

$(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);
    })
});

$（文档）.ready（函数（）{
$（“#插入按钮”）。单击（函数（）{
$（“#receiver”）.append（'Hi'，”你好吗？
）；
//将页面的HTML保存到自动下载的文件中。
//我们制作一个包含要下载的数据的Blob。
var file=new window.Blob（[document.documentElement.innerHTML]，{type:“text/html”}）；
var URL=window.webkitURL | | window.URL；
//这是将下载数据的URL。
var downloadUrl=URL.createObjectURL（文件）；
var a=document.createElement（“a”）；
//这将设置文件名。
a、 下载=“source.htm”；
a、 href=下载URL；
//实际执行下载。
文件.正文.附件（a）；
a、 单击（）；
文件.body.removeChild（a）；
})
});

---

您应该在上查看

URL

的兼容性矩阵和文档。值得注意的是，

URL

不适用于IE 9或更早版本。相同。

afaik它将保存加载的内容，而不是动态添加的内容。。。如果我错了，请更正…我不喜欢这种方法的一个事实是，每次保存时都需要指定名称和位置（ctrl+s）。谢谢您需要将编辑过的文件保存到服务器上吗？您不能只使用javascript来实现这一点-您需要一种服务器端语言。您可以为标记提供id，然后在添加内容后，您可以获得html。。。您将无法在服务器上保存（如果您试图这样做，因为它是在客户机上执行的），您可以使用这样的东西。。在我看来。。另外，为了在服务器上保存或在添加内容后使用php下载，您可以对服务器php页面进行ajax调用。。。希望它有帮助…不，这不会被托管在服务器上。仅限本地驱动器。它在Chrome中工作。有没有一种方法可以指定下载它的URL，并最终用新的URL覆盖现有的URL？谢谢“在哪里下载”。你是说它将保存在文件系统中的什么位置？我们最多可以建议一个带有

download

属性的文件名。最终，浏览器会根据默认配置或提示用户来决定保存位置。浏览器决定在覆盖的情况下会发生什么。否则，这将是一个安全漏洞。“这里有一个很好的小文件供您下载为

~/.login

”（如果您不熟悉*nix，允许这样的下载会很糟糕。）好的，很显然，由于合理的限制（安全性），Javascript不是我想要完成的任务的合适技术。我想简单地修改和保存文件，就像它是一个在线或桌面应用程序一样。我将研究其他一些替代方案。非常感谢你的帮助。

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

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

$(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);
    })
});