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函数。

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

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

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';
  }
}

Answer 2

您可以使用Cookie进行设置。使用这个：

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

然后：

Cookies.set('color', dark);
Cookies.get('color'); // if you console log it it will say "dark"
Cookies.set('color', white);
Cookies.get('color'); // if you console log it it will say "white"

编辑：

最终代码应类似于：

HTML：

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

JavaScript：

document.body.style.backgroundColor = Cookies.get('color');

function changeColor() {
    var select = document.getElementById("Invert");
    var option = select.options[select.selectedIndex].value;
    document.body.style.backgroundColor = option;
    Cookies.set('color', option);
}

注意

如果您不使用本地主机之类的域名，则Cookie无效！

这应该可以正常工作，但是您应该对其进行改进：）

刷新后在所有网页上使用javascript进行更改

2 个答案: