当按下后退按钮时,Javascript会更改为丢失的dom

Question

我有这个视图,改变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>

Answer 1

您可以将 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>