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似乎保留了Java脚本更改，而其他浏览器在不更改Java脚本的情况下加载了页面。

是否有一种方法可以使其他浏览器在Safari和Firefox中正常工作？

Answer 1

在使用后退按钮/前进按钮的情况下，您可以使用浏览器的Window.sessionStorage或Window.localStorage来存储和检索状态

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

1 个答案: