javascript - 在所有网页上和刷新后使用 javascript 保持更改

Question

我有一个下拉选择器，可让您使用“白色”和“黑色”选项选择网站主题。

<select name="Invert" onchange="changeColor(this)">
   <option value="white">White</option>
   <option value="black">Black</option>
</select>

然后我有以下 js 函数 changeColor()

function changeColor(x) {
  var body = document.getElementById('body');

  if (x.value == 'black') {
    body.style.backgroundColor = x.value;
    body.style.color = 'white';
  } else if (x.value == 'white') {
    body.style.backgroundColor = x.value;
    body.style.color = 'black';
  }
}

我在每个页面的单独 js 文件中为其他页面设置了相同的选择器和 js 函数。

当我选择一个主题选项然后刷新或转到另一个页面时，主题颜色会恢复为默认的白色。

问题是，我如何在刷新网站后为其他页面保留更改后的主题？

标签： javascripthtmlcss

Answer 1

将选择保存在 中localStorage，然后在页面加载时，将样式设置为 中的值localStorage（如果有）。

例如：

var body = document.getElementById('body');
if (localStorage.color) body.style.backgroundColor = localStorage.color;
function changeColor(x) {
  if (x.value == 'black') {
    body.style.backgroundColor = x.value;
    body.style.color = 'white';
    localStorage.color = 'white';
  } else if (x.value == 'white') {
    body.style.backgroundColor = x.value;
    body.style.color = 'black';
    localStorage.color = 'white';
  }
}