CODEWITHSUNDEEP
javascriptjqueryhtml
fs_tigre
fs_tigre

Reputation: 10738

How to save html that was modified on the browser (the DOM) with Javascript/jQuery

First of all let me clarify that what I'm trying to do is for locally use only, users will have direct access to the html page.

What I'm trying to do is basically append and save text to an HTML file.

This is what I have.

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>');
    })
});

What I don't know is how to save the file (index.html) after the appending. Any idea how to do that? Is this even possible with Javascript or jQuery?

Upvotes: 5

Views: 4155

Answers (2)

Louis
Louis

Reputation: 151391

You could change your handler to do this:

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

You should take a look at the compatibility matrix and documentation of URL over at MDN. Notably URL is not available for IE 9 or earlier. Same for Blob.

Upvotes: 3

pravid
pravid

Reputation: 729

If I understand it correctly, you need it on local machine and for temporary usage then you can store it in cookies. So whenever you load the page, check if cookie available, if yes then load data from cookies or load the fresh data. You can use this data, unless and until cookies are not cleared.

Hope this helps...

Upvotes: 0

Related Questions