6

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.)

Pacerier
  • 86,231
  • 106
  • 366
  • 634
  • What do you mean when you are saying "the current states" ? Value of a few variables or the whole page? – Haibara Ai Dec 15 '16 at 07:20
  • 1
    @HaibaraAi, The entire page. Think of it as something like Windows hibernation: a complete save and restore without changes or with as little changes as possible. – Pacerier Dec 15 '16 at 07: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 Aug 04 '21 at 21:18
  • It seems that the [back/forward cache](https://web.dev/bfcache/) of the browsers is doing exactly such a snapshot. – Sebastian Mar 27 '23 at 18:11

3 Answers3

6

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 come 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.

Soviut
  • 88,194
  • 49
  • 192
  • 260
  • Regarding storage space, I'm saving it to local harddisk (with permission). Regarding Dom state, is there any way to save just the initial DOM state though? It's important to mention I'm not aiming for it to work in 100% of cases. 90% is good enough. – Pacerier Dec 15 '16 at 08:10
  • You could ask the `` element for it's `innerHtml` and store that as a huge string. – Soviut Dec 15 '16 at 15:35
  • What are some techniques to store the "javascript state" (variables)? – Pacerier Dec 15 '16 at 21:38
  • You would recursively traverse `window` and hope for the best. Now either mark my answer correct, since you'll never get another, or I'd gladly delete it and pray nobody ever attempts this again. – Soviut Dec 16 '16 at 09:10
  • @Soviut I would mark this correct if I had permission to do so. I too was delving into this topic hoping to find some heap snapshot I could somehow store as binary then bring back in browser agnostic way. Nope. – King Friday Aug 04 '21 at 15:10
2

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 complete 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);
};
Community
  • 1
  • 1
Raydel Miranda
  • 13,825
  • 3
  • 38
  • 60
-1

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.

AnonA
  • 1
  • 3