当用户在 google chrome 中按下后退按钮时，如何加载最后的状态？

Question

我希望浏览器在用户按下后退按钮时加载我的网页的最后状态。当用户仍在我的页面中时，我的代码运行良好。但是当它按下 Go link 并转到 google.com 然后按下时，he/she 看到计数器 = 0 而不是他离开页面时的数字。

这是一个示例程序。在真实示例中，我想在购物网站中执行此操作，当用户按下添加到购物车按钮时，它会执行 ajax 请求并相应地更新页面，但在它转到其他页面然后按回按钮 he/she 看到他的购物车里没有任何东西，这不是我们想要的。

<span id="counter">0</span>
<button onclick="add_counter();">+</button>

<a href="https://google.com">Go!</a>

<script>
    function add_counter() {
        var counter = document.getElementById('counter');
        counter.innerHTML = parseInt(counter.innerHTML) + 1;
        history.pushState({ number: counter.innerHTML }, null);
    }

    window.onpopstate = function (event) {
        var counter = document.getElementById('counter');
        if (event.state != null) {
            counter.innerHTML = event.state.counter;
        } else {
            counter.innerHTML = "0";
        }
    }
</script>

Answer 1

据我所知，使用纯 JS 或 HTML（不谈论 cookie）是不可能在页面之间传输数据的。 JavaScript 和 HTML 是前端语言，它们只能在一个特定的打开网页上工作。一旦您再次打开网页，它们将重新加载，因此未保存的信息将消失。

如何解决？最后，您需要将数据快速保存在服务器 (AJAX) 或用户 (cookie) 上。一旦用户返回您的页面，就可以读出此信息。

Answer 2

如果您不愿意将数据保存在服务器中，您可以将此数据保存在Local Storage或Session Storage中.

当页面再次加载时，只需从存储中获取之前的状态。

您可以在此处找到有关如何执行此操作的一个很好的示例： https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

演示：https://taniarascia.github.io/sandbox/tab/

Answer 3

您可以使用

但请注意，如果用户在浏览器中使用隐身模式window，您将无法使用这些功能

当用户在 google chrome 中按下后退按钮时，如何加载最后的状态？

How can I load last state when user presses back button in google chrome?

javascript

html

google-chrome

firefox

browser-history