使用localstorage保存后台

Question

我有一个按钮可以改变背景颜色和标题颜色

button id="change" onclick="change()">Change background!</button>                                           

var state = true;



function change(){
         if (state){
        document.body.style.backgroundColor = "red";
        document.getElementById('title').style.color='blue';

         } else {
            document.body.style.backgroundColor = "#005fff";
            document.getElementById('title').style.color='lightgreen';
                  }
        state = !state;
}

我使用状态在一个和第二个选项之间进行选择，如果您有更好的解决方案请告诉我。

我想将设置保存在本地存储中（刷新并退出后我想保留选择的背景）。

Answer 1

你必须用你自己定义的键更新localStorage，在例子中选择bgcolor。

此外，当加载脚本时，您应该在文档正文上应用 bgcolor，分配您从 localStorage 获得的值。

如果没有找到值，我将背景设置为白色。这当然是可选的:)

var state = true;

document.body.style.backgroundColor = localStorage.getItem('bgcolor') || 'white';

function change(){
  if (state){
    document.body.style.backgroundColor = "red";
    document.getElementById('title').style.color='blue';
    localStorage.setItem('bgcolor', 'red');

  } else {
    document.body.style.backgroundColor = "#005fff";
    document.getElementById('title').style.color='lightgreen';
    localStorage.setItem('bgcolor', '#005fff');
  }
  state = !state;
}

<h1 id="title">Title</h1>
<button id="change" onclick="change()">Change background!</button>

Answer 2

您可以像这样将当前颜色存储在本地存储中：

function change(){
  const colorOption = localStorage.getItem('colorOption');
  if (colorOption === "2"){
    document.body.style.backgroundColor = "red";
    document.getElementById('title').style.color='blue';
    localStorage.setItem('colorOption', '1');
  } else {
    document.body.style.backgroundColor = "#005fff";
    document.getElementById('title').style.color='lightgreen';
    localStorage.setItem('colorOption', '2');
  }
}