javascript - 保留不同html页面之间的按钮完成的颜色更改

我有一个网站，其中使用按钮将CSS配色方案更改为深色使用；

$(document).ready(function () {
  $(".theme-switch").on("click", () => {
    $("body").toggleClass("dark-theme");
  });
});

哪个会更改CSS中的颜色变量，进而会更改该特定页面的颜色方案。但是如何在整个网站上保留这种颜色变化？

最佳答案

如果要保存并以后访问，可以执行以下操作：

$(document).ready(function () {
  let darkTheme = localStorage.getItem('theme') === 'dark';
  updateTheme();

  function updateTheme() {
      if (darkTheme) {
          $("body").addClass("dark-theme");
      } else {
          $("body").removeClass("dark-theme");
      }
  }

  $(".theme-switch").on("click", () => {
      darkTheme = !darkTheme;
      updateTheme();
      localStorage.setItem('theme', darkTheme ? 'dark' : 'light');
  });
});

您还可以添加此选项以确保它在所有选项卡中都发生更改：

window.addEventListener('storage', () => {
     darkTheme = localStorage.getItem('theme') === 'dark';
     updateTheme();
});

（在function updateTheme()之前）。每当域的另一个选项卡中的storage或localStorage更新时，都会触发sessionStorage事件。这对于选项卡之间的通信很有用。