javascript - 如何使用 Javascript/jQuery 保存在浏览器(DOM)上修改过的 html

Question

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

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

这就是我的。

HTML (index.html)

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

JS

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

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

我不知道的是如何在附加后保存文件(index.html)。知道怎么做吗？这甚至可以用 Javascript 或 jQuery 实现吗？

Answer 1

您可以更改您的处理程序来执行此操作:

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

您应该在 MDN 查看兼容性矩阵和 URL 的文档.值得注意的是 URL 不适用于 IE 9 或更早版本。同样适用于 Blob .