Question

我是Java语言的新手，正在尝试编写代码，其中两个不同的按钮为页面提供了两种不同的样式，以便您可以在开始时选择一种设计，而网站保持这种状态。在刷新站点/单击同一站点上的其他页面后，如何使设计保持原样？

我尝试了sessionStorage和localStorage，但似乎无法正常工作。

这是我到目前为止所拥有的：

function greenButton() {
 document.getElementById("container").style.backgroundColor = "white";
  document.body.style.backgroundColor = "green";
}
 function redButton() {
  document.getElementById("container").style.backgroundColor = "black";
  document.body.style.backgroundColor = "red";
}

和html：

<div class="green" onclick="greenButton()>green</div>
<div class="red" onclick="redButton()>red</div>

<div class="container">Content</div>

即使刷新/切换页面后，我还必须更改/添加什么才能使选定的设计生效？

Answer 1

由于您不熟悉javascript，因此我在这里使用纯javascript

创建新函数并在页面加载时调用它

<body onload="checkthelastColor()">
    <div class="green" onclick="greenButton()>green</div>
    <div class="red" onclick="redButton()>red</div>
    <div class="container">Content</div>
</body>

这是函数

function checkthelastColor(){
    var color = localStorage.getItem("selectedColor")
    if(color == "red"){
        redButton()
    }else{
        greenButton()
    }
}

在您的旧函数中，将颜色保存在localStorage中，例如

function greenButton() {
    document.getElementById("container").style.backgroundColor = "white";
    document.body.style.backgroundColor = "green";
    localStorage.setItem("selectedColor","green");
}
function redButton() {
    document.getElementById("container").style.backgroundColor = "black";
    document.body.style.backgroundColor = "red";
    localStorage.setItem("selectedColor","red");
}

页面刷新后如何保持onclick功能

1 个答案: