Saving Webpage With Javascript/jQuery Changes

Question

I was curious if there is a way for users to save a complete webpage after changes have been made via Javascript/jQuery. To my understanding this is only possible with server side coding - but I was unable to find a definitive answer.

As a simple example, I would allow users the ability to customize something like the background color and text of a webpage, and then save their changes to their local machine.

Edit: The resources I'm looking to create will need to be saved to their local machine as a webpage - therefore storing information in the browser is not ideal.

The resources will be used for a program called OBS, where the user will basically be importing the saved elements via the locally saved file.

"save their changes to their local machine" so that when they come back to your page, the changes are saved or that they can have a copy of the html page, with their changes ? — Kaiido
– Kaiido, Commented Sep 15, 2015 at 23:36
You should be more descriptive. Do you want temporary or permanent storage? Do you want to save the html page or its content or the user made customizations only? — Pankaj Dubey
– Pankaj Dubey, Commented Sep 15, 2015 at 23:56
I want to save the entire page, with the edits made to it. When I say "save locally" I mean the users will literally be saving the webpage files to their hard drive. I tried to add more information via my edit. — DRB
– DRB, Commented Sep 16, 2015 at 0:00
@Kaiido so they can save a copy of the page with their changes. — DRB
– DRB, Commented Sep 16, 2015 at 0:03

Kaiido · Accepted Answer · 2015-09-16 00:36:55Z

3

On modern Browsers, you can use an XMLSerializer and Blob to achieve it :

document.querySelector('input').onchange = function() {
  document.body.style.backgroundColor = this.value;
}

document.querySelector('button').onclick = function() {
  var a = document.createElement('a');
  // serialize the whole document as a string
  var doc = new XMLSerializer().serializeToString(document.documentElement);
  // convert this string to a blob object
  if (window.Blob) {
    var blob = new Blob([doc], {type: 'text/html'});
    // create a blob URL
    a.href = URL.createObjectURL(blob);
  } else
  //browser don't support Blob object, create a data url
    a.href = 'data: text/html; charset=utf8, ' + doc;
  
  
  /* The following won't work in the snippet but can be used on your server for browsers supporting download attribute

    if ('download' in a) {
      a.download = 'yourPageName.html';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    } else {*/
  a.innerHTML = 'Right click - Save As.. to download the page';
  document.body.appendChild(a);
  //  }
}

Hello
<input placeholder="choose a background color" />
<button>save</button>

edited Sep 16, 2015 at 0:36

answered Sep 16, 2015 at 0:23

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neha Over a year ago

is there any way to hide some content on downloaded html page?

Aramil Rey · Accepted Answer · 2015-09-15 23:39:07Z

2

It's better to store those settings server side associated with the user itself, so the settings are saved and can be seen in different browsers/ devices, and won't get deleted clearing browser storage.

Anyways, as it's already stated it can be done using the browser local storage

answered Sep 15, 2015 at 23:39

Aramil Rey

3,4751 gold badge23 silver badges31 bronze badges

1 Comment

DRB Over a year ago

I apologize for not being more clear in the beginning, but the issue is that for what I'd like to create, users will be unable to take advantage of local storage via the browser. In essence, I'd like to have them be able to make changes via jQuery/JS and then right click the webpage and "Save As".

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can use Cookies, sessionStorage or localStorage.

Cookies and localStorage can persist through different sessions, sessionStorage only persists until the browser is closed. From the MDN Web Storage API

sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)

localStorage does the same thing, but persists even when the browser is closed and reopened.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 15, 2015 at 23:32

Ozan

3,7492 gold badges21 silver badges23 bronze badges

Collectives™ on Stack Overflow

Saving Webpage With Javascript/jQuery Changes

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related