在浏览器中来回移动时保留Javascript更改

我有以下短代码，以便更容易地演示我的问题：

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

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

函数更改（）{
document.getElementById（'change'）.innerHTML=“完成！”；
}
改变我！

假设文件名为

test.html

当点击

改变我字符串将更改为
完成

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

和其他浏览器（Chrome、Vivaldi、Min、Opera）一样，我得到了
改变我而不是
完成

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

在Safari和Firefox中，有没有一种方法可以让其他浏览器达到相同的行为？
您可以使用浏览器的
窗口。会话存储
或
窗口。本地存储
来存储和检索使用后退按钮/前进按钮的情况下的状态

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


addEventListener（“加载”），函数（事件）{
setHTML（）；
})
函数setHTML（）{
document.getElementById（'change'）.innerHTML=window.sessionStorage.getItem（“状态”）| |“不在收藏夹中”；
}
函数addToFavorites（）{
setItem（“state”、“Done”）；
document.getElementById（'change'）.innerHTML=window.sessionStorage.getItem（“状态”）；
}
改变我！
您可以使用浏览器的
窗口.会话存储
或
窗口.本地存储
来存储和检索使用后退按钮/前进按钮情况下的状态

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


addEventListener（“加载”），函数（事件）{
setHTML（）；
})
函数setHTML（）{
document.getElementById（'change'）.innerHTML=window.sessionStorage.getItem（“状态”）| |“不在收藏夹中”；
}
函数addToFavorites（）{
setItem（“state”、“Done”）；
document.getElementById（'change'）.innerHTML=window.sessionStorage.getItem（“状态”）；
}
改变我！
如果您试图管理页面或应用程序的状态，请尝试一些不同的、健壮的方法，类似于此问题-尝试解释您为什么需要在代码中使用此功能，为什么要保留更改。也许你需要一个单页的应用程序？我们不知道，试着分享你的needs@AmbrishPathak我有一个iOS应用程序，它使用网络视图来显示内容。还有一个按钮可以将实际页面添加到收藏夹中。单击此按钮时，它会变为
在您的收藏夹中
。当用户再次返回并转发到此页面时，他会认为它不在他的收藏夹中，因为它说
不在您的收藏夹中
。您可以使用浏览器的
窗口。会话存储
或
窗口。本地存储
，来存储和检索返回按钮/转发按钮处于禁用状态时的状态usedWhy you want to persistent changes，如果您试图管理页面或应用程序的状态，请尝试一些不同且健壮的方法类似于此问题-尝试解释为什么您的代码需要此功能。也许你需要一个单页的应用程序？我们不知道，试着分享你的needs@AmbrishPathak我有一个iOS应用程序，它使用网络视图来显示内容。还有一个按钮可以将实际页面添加到收藏夹中。单击此按钮时，它会变为
在您的收藏夹中
。当用户再次返回并转发到此页面时，他会认为它不在他的收藏夹中，因为它说
不在您的收藏夹中
。您可以使用浏览器的
窗口。会话存储
或
窗口。本地存储
，来存储和检索返回按钮/转发按钮处于禁用状态时的状态使用您需要将
onclick=“change（）；”
更改为
onclick=“addToFavorites（）；”
。在答案中进行了编辑。您的代码现在可以运行了，但在返回和前进时仍然是相同的问题。似乎对我有效-您可以尝试在单击前后在控制台中运行
window.sessionStorage.getItem（“state”）
，查看它是否被存储。此外，您可能还可以在
控制台中输入
。在
加载
事件侦听器中记录
，以查看是否在单击后退和前进按钮时注册了重新加载。您是否可以检查它是否与您答案中的代码一起工作？你和我更改了好几次，我不确定是否是代码对你有效。也许你有更老的版本？！
窗口中缺少
）
。addEventListener
。已更新-现在应该可以工作了。您需要将
onclick=“change（）；”
更改为
onclick=“addToFavorites（）；”
。在答案中进行了编辑。您的代码现在可以运行了，但在返回和前进时仍然是相同的问题。似乎对我有效-您可以尝试在单击前后在控制台中运行
window.sessionStorage.getItem（“state”）
，查看它是否被存储。此外，您可能还可以在
控制台中输入
。在
加载
事件侦听器中记录
，以查看是否在单击后退和前进按钮时注册了重新加载。您是否可以检查它是否与您答案中的代码一起工作？你和我更改了好几次，我不确定是否是代码对你有效。也许你有更老的版本？！
窗口中缺少
）
。addEventListener
。已经更新-现在应该可以工作了。