6

我有这个视图可以更改 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>
4

1 回答 1

2

您可以将 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>
于 2018-11-24T16:14:10.237 回答