Javascript changes to the dom lost when back button pressed

Question

I have this view that changes the text inside a div.

The user can then click on a link to jump to another page. But when the user presses the "back" button all DOM changes are lost.

FF remembers the changed div text but Chrome and IE do not.

I've found similar question, but in my case it is not possible to summarize the state by a url hash because the div contains random data.

I need is so that when the user goes back, the div is filled from the identical series of numbers.

<script type="text/javascript">
    function ChangeText() {
        var newText = "";

        for (var i = 0; i < 10; i++) {
            newText = newText + Math.random() * 100;
            newText = newText + "<br />";
        }

        $("#container").html(newText);
    }
</script>

<div id="container">
    INITIAL TEXT
</div>
<button onclick="ChangeText()">Click here to generate random numbers</button>
<br/>
<a href="http://www.google.com">External link</a>

You may check this question/answer here http://stackoverflow.com/questions/1195440/ajax-back-button-and-dom-updates — BenSchro10, May 22 '12 at 12:49
This not solve my problem. I know that Safari e FF store the modified dom ready for the back button but IE and charome return to initial state. — Riccardo Bassilichi, May 22 '12 at 13:05
you could try to set a cookie, and modify it every time you call the function. — d4rkpr1nc3, May 22 '12 at 13:07
The cookie is a good idea! But my question is: Storing html in cookies is a best practice to persist DOM changed from back button? — Riccardo Bassilichi, May 22 '12 at 13:20
You don't store the html. You store a datastructure which you use to rebuild the page. — John Kalberer, May 22 '12 at 16:12
Why create a server call to rebuild the page when I need the same data? Store json data is the same concept. Why rebuild HTML already built. I search a mechanis to manipolate cache or tell the browser to cache the modified DOM. — Riccardo Bassilichi, May 22 '12 at 17:22
Note that not all browsers have a bfcache (back-forwards cache) which remember the changes in DOM for when the back button is pressed. See this question: https://stackoverflow.com/questions/60382446/which-browsers-have-a-back-forward-cache-which-keeps-modifications-to-dom/60382721 — Flimm, Feb 24 '20 at 19:51

score 2 · Answer 1 · answered Nov 24 '18 at 16:14

You can store your html in LocalStorage, so when user go back, you fill the content with your localStorage:

<script type="text/javascript">
    function onLoadPage(){
        if(window.localStorage.getItem("newText") != null){
            $("#container").html(window.localStorage.getItem("newText"));
        }
    }

    function ChangeText() {
        var newText = "";

        for (var i = 0; i < 10; i++) {
            newText = newText + Math.random() * 100;
            newText = newText + "<br />";
        }

        window.localStorage.setItem("newText") = newText;

        $("#container").html(newText);
    }
</script>

<div id="container">
    INITIAL TEXT
</div>
<button onclick="ChangeText()">Click here to generate random numbers</button>
<br/>
<a href="http://www.google.com">External link</a>

Javascript changes to the dom lost when back button pressed

1 Answers1

Linked