Question

基本上，我有一个用于更改网站主题/颜色的按钮，但是它仅在主页上起作用，而不会影响其他任何页面。我该如何解决？

JavaScript代码：

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

HTML代码：

<button> Change Theme</button>

Answer 1

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

前端-通过使用js cookie将颜色主题存储在cookie中，然后进行检索。

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


let themeColor = document.cookie;

或

var getCookie = (key) => {
    a = [];
    x = document.cookie.split('; ');
    for (var i = x.length - 1; i >= 0; i--) {
        b = x[i].split('=');
        a[b[0]] = b[1];
    };
    return (key) ? a[key] : a;
};

function setCookie (name, value) {
    document.cookie = name + '=' + value;
    return getCookie();
}

setCookie('theme', 'grey');
let themeColor = getCookie('theme');

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

Answer 2

导航到新页面将从其文件中重新加载脚本和样式，从而防止在新页面中显示对函数所做的DOM更改。您可以使用本地存储或会话存储来规避此问题。让您的上述功能执行以下操作：

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

然后您就可以像这样在文档内部准备好运行代码了：

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

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

如何使主题按钮更改器影响网站上的所有页面而不仅仅是主页？

2 个答案: