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

在点击事件之前添加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);
});

Answer 2

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

myStorage = window.localStorage;

然后

myStorage.getItem() or myStorage.setItem()

只需以与使用会话存储相同的方式使用它，就可以了！更多信息可以在 Mozilla 开发者文档中找到，https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage。