在浏览器中前进和前进时保持 Javascript 更改答案

【问题标题】：Keep Javascript changes when going back and forward in browser在浏览器中前进和前进时保持 Javascript 更改
【发布时间】：2019-04-29 02:55:18
【问题描述】：

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

<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 相同的行为？

【问题讨论】：

为什么要持久化更改，如果您尝试管理页面或应用程序的状态，请尝试一些不同且强大的方法
类似于这个问题 - stackoverflow.com/questions/31837195/…
试着解释为什么你的代码需要这个特性。也许您需要一个单页应用程序？我们不知道，请尝试分享您的需求
@AmbrishPathak 我有一个 iOS 应用程序，它使用 WebView 来显示内容。还有一个按钮可以将实际页面添加到收藏夹。单击此按钮时，它会更改为Is in your favorites。当用户返回并再次转发到此页面时，他会认为它不在他的收藏夹中，因为它现在说的是Is NOT in your favorites。
您可以查看使用浏览器的Window.sessionStorage 或Window.localStorage 来存储和检索使用后退按钮/前进按钮情况的状态

标签： javascript html dom browser back-button

【解决方案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>

【讨论】：

您需要将onclick="change();" 更改为onclick="addToFavorites();"。在答案中进行了编辑。
您的代码现在可以工作了，但是在前进和前进时仍然是同样的问题。
似乎对我有用 - 您可以尝试在单击之前和之后在控制台中运行 window.sessionStorage.getItem("state") 以查看它是否正在存储。此外，您可以在load 事件侦听器中放入console.log，以查看是否在单击后退和前进按钮时注册了重新加载。
您能否检查一下它是否与您答案中的代码一起使用？你和我改变了好几次，我不确定它是否适合你的代码。也许你有一个旧版本？！
window.addEventListener 中缺少 )。已更新 - 现在应该可以使用了。