Javascript 我如何使我的主题按钮变换器影响我网站上的所有页面，而不仅仅是主页？

基本上我有一个改变网站主题/颜色的按钮，但它只在主页上工作，不影响任何其他页面。我该如何解决这个问题

JavaScript代码：

$(document).ready(function () {
    $("button").click(function () {
        $("div").css("background", "grey");
        return false;
    });
});

HTML代码：

<button> Change Theme</button>

改变主题

您可以从两端处理这种情况

前端-使用js cookie将颜色主题存储在cookie中，并检索它

$(document).ready(function () {
    $("button").click(function () {
        document.cookie = "theme=grey";
        return false;
    });
});


let themeColor = document.cookie;

或

---

后端-通过将主题颜色存储在首选项表中并获取它。

导航到新页面将从其文件中重新加载脚本和样式，防止您对函数所做的DOM更改出现在新页面中。 您可以通过使用本地或会话存储来避免这种情况。让您的上述功能执行如下操作：

$('button').click(function () {
  localStorage.setItem('isGreyTheme', true)
}

然后，您可以在文档中运行代码，如下所示：

const isGrey = localStorage.getItem('isGreyTheme')
if (isGrey) {
  $('div').css('background', 'grey');
} else {
   // handle other cases
}

---

本地存储是跨页面持久化数据的最简单方法。您还可以根据需要使用会话存储。如果您不希望在窗口关闭时此主题保持不变，请使用会话存储；如果您希望此主题保持不变，请使用本地存储，除非显式更改。

我还可以处理其他哪些情况，因为我是JavaScript新手，所以我不确定应该在其中放置什么。在您的实现as中，不需要在其中放置任何内容。但是你可以在里面放很多东西来增强你的用户体验。我脑海中浮现的一些想法是：你可以以某种方式强调按钮（轮廓），以向用户表明他们可以选择更改主题。您可以添加其他条件来说明各种主题。希望有帮助。查看颜色选择器，并浏览源代码或chrome开发工具

const isGrey = localStorage.getItem('isGreyTheme')
if (isGrey) {
  $('div').css('background', 'grey');
} else {
   // handle other cases
}