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>

Answer 1

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>