Сохраняйте изменения 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 вашего браузера для сохранения и получения состояния для случаев, когда используются кнопки назад / вперед

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