sessionStorage 在重新加载后删除自身

Question

我对以下代码有疑问：

 "use strict";

let green = "green";
let gold = "gold";
let orange = "orange";

let colors = ["green", "gold", "orange"];
let index = sessionStorage.getItem("color");

if(index == null) {
    index = 0;
}

let button = document.getElementById("click");
button.addEventListener("click", function() {
    console.log(index)
    document.body.style.backgroundColor = colors[index];
    index++;
    sessionStorage.setItem("color", index);
});

为什么我刷新页面时颜色会重置？

Answer 1

刷新时存储重置的原因是因为您正在使用会话存储。尝试在刷新时坚持使用本地存储。

myStorage = window.localStorage;

然后

myStorage.getItem() or myStorage.setItem()

只要像使用会话存储一样使用它就可以了！可以在 Mozilla 开发人员文档中找到更多信息，https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage。

Answer 2

在点击事件之前添加 document.body.style.backgroundColor 以及在初始页面加载时它将选择初始 index 值 0 并应用相应的颜色。然后当单击按钮时 index 值增加并应用新颜色。

在随后的刷新更新后 index 值将从 sessionStorage 中使用。

let green = "green";
let gold = "gold";
let orange = "orange";

let colors = ["green", "gold", "orange"];
let index = sessionStorage.getItem("color");

if (index == null) {
    index = 0;
}

document.body.style.backgroundColor = colors[index];

let button = document.getElementById("click");
button.addEventListener("click", function() {
    console.log(index)  
    document.body.style.backgroundColor = colors[index];
    index++;
    sessionStorage.setItem("color", index);
});

sessionStorage 在重新加载后删除自身

sessionStorage deletes itself after reload

javascript

session

session-storage