How should the state of a page be saved?

For example, consider the user is browsing through all kinds of webpages, some of them probably coded like this:

onload=function(){
    let d_s = document.getElementById('d').style;
    d_s.width = d_s.height = Math.random() * 500 + 'px';
    setTimeout(onload, 800 + Math.random() * 800);
};

<div id=d style=background:skyblue;></div>
<!-- click Run ↓ -->

How should the state of a page be saved?

For example, consider the user is browsing through all kinds of webpages, some of them probably coded like this:

onload=function(){
    let d_s = document.getElementById('d').style;
    d_s.width = d_s.height = Math.random() * 500 + 'px';
    setTimeout(onload, 800 + Math.random() * 800);
};

<div id=d style=background:skyblue;></div>
<!-- click Run ↓ -->

I'd like to save the current states of selected tabs (the entire tab session) and resume them at a future time.

What are some techniques to do this?

(This should be possible. After all, we can drag a tab from one Chrome window onto the next without any state change even while playing a video halfway.)

• javascript
• google-chrome
• google-chrome-extension
• save

• What do you mean when you are saying "the current states" ? Value of a few variables or the whole page? – Haibara Ai Commented Dec 15, 2016 at 7:20
• 2 @HaibaraAi, The entire page. Think of it as something like Windows hibernation: a plete save and restore without changes or with as little changes as possible. – Pacerier Commented Dec 15, 2016 at 7:46
• The reason that it's possible to drag chrome tabs around without interruption is because inside Chrome, every tab is running as its own process. Nothing is hibernating, the process is just being given a new view (tab) to target. – Soviut Commented Aug 4, 2021 at 21:18
• It seems that the back/forward cache of the browsers is doing exactly such a snapshot. – Sebastian Commented Mar 27, 2023 at 18:11

3 Answers 3

In short, no.

This is incredibly ambitious since not only do you have to store the initial DOM state (which could be altered at any point by an on-page script loading) but you have to store the state of local storage, cookies, sessions, assets like images, scripts, stylesheets, the list goes on.

If you were able to take a low level snapshot of the memory, store it somewhere, then restore it to memory later, you might have a chance, since that's what hibernation is doing. However, no such API exists in Chrome, or any browser.

Even before any of the technical challenges, this is going to result in you having to ask for a lot of permissions when installing your extension to access all the various APIs.

Second, assuming you do e up with way of serializing all these aspects of a page, where will you store the hibernated state? Your best bet would be local storage on the background page, but that often has size limits.

Third, you need to actually browse to the page so that the URL is set up correctly. Without this step, the web page will only appear to have been brought back from hibernation but if the user tries to do anything they'll be hit with cross-site scripting (XSS) warnings and refreshing the page will just return to a blank tab.

Finally, you're bound to encounter a nearly infinite number of edge cases brought on by site-specific nuances you're not able to predict.

You could use selenium in order to automate the needed steps to arrive the desired state.

Usually someone is looking for something like this when testing some functionality.

I generally use it when developing some app that require large amounts of fields to fill in order to test some related functionality. And, it is really tedious to plete the form each time I want to test something.

With selenium you could even automate the whole test.

UPDATE:

If you require execute some js code, with selenium, you can.

This a python example with the selenium package installed:

>>> from selenium import webdriver
>>> wd = webdriver.Firefox()                   # You could use Chrome too.
>>> wd.get("http://localhost/foo/bar")
>>> wd.execute_script("return foobar()")
u'eli'

Example taken from this answer

So with selenium you can to perform a call on a function like this and use some fixed value for emulating a saved state:

onload=function(){
    /* You could use some fixed value for emulate a saved state */
    let d_s = document.getElementById('d').style;
    d_s.width = d_s.height = some_fixed_value * 500 + 'px';
    setTimeout(onload, 800 + some_fixed_value * 800);
};

This is terrible mistake of HTML5, we demand as third party user return of page 1,2,3, next, prev, go to... It's like forcing us to browse sites through virtual machine. Knowyourmeme f. e. should change that. I can only save html5 but it's only one state that doesn't allow me to change content freely.