Javascript 对 dom 的更改在按下后退按钮时丢失

我有这个视图可以更改 div 内的文本。

然后，用户可以单击链接跳转到另一个页面。但是当用户按下“后退”按钮时，所有 DOM 更改都会丢失。

FF 会记住更改后的 div 文本，但 Chrome 和 IE 不会。

我发现了类似的问题，但就我而言，不可能通过 url 哈希来总结状态，因为 div 包含随机数据。

我需要的是，当用户返回时，div 会由相同的数字序列填充。

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

您可以将 html 存储在 LocalStorage 中，因此当用户返回时，您可以使用 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>