在浏览器中前后移动时保留 Javascript 更改

Question

我有以下简短代码可以更轻松地演示我的问题：

<script>
function change() {
    document.getElementById('change').innerHTML = "Done!";
}
</script>

<div id="change" onclick="change();">Change me!</div>

假设文件名为 test.html。

单击 Change me! 时，字符串将更改为 Done!。

Safari、Firefox：当点击浏览器后退按钮然后点击浏览器前进按钮返回我的 test.html 时，它显示 Done!。这就是我所期待的！

对其他浏览器（Chrome、Vivaldi、Min、Opera）做同样的事情，我得到的是 Change me! 而不是 Done!。

Safari 和 Firefox 似乎保留 Javascript 更改，而其他浏览器在使用后退和前进按钮时加载页面时没有 Javascript 更改。

有没有办法让其他浏览器达到与在 Safari 和 Firefox 中工作时相同的行为？

Answer 1

您可以查看使用浏览器的 Window.sessionStorage 或 Window.localStorage 来存储和检索使用后退 button/forward 按钮的情况的状态

<script>
window.addEventListener("load", function(event) {
setHTML();
})

function setHTML() {
document.getElementById('change').innerHTML = window.sessionStorage.getItem("state")||"NOT IN FAVORITES";
}

function addToFavorites() {
window.sessionStorage.setItem("state", "Done");
document.getElementById('change').innerHTML = window.sessionStorage.getItem("state");

}
</script>

<div id="change" onclick="addToFavorites();">Change me!</div>

在浏览器中前后移动时保留 Javascript 更改

Keep Javascript changes when going back and forward in browser

html

javascript

browser

dom

back-button