如何使主題按鈕更改器影響網站上的所有頁面而不僅僅是主頁？

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
}

本地存儲是跨頁面持久存儲數據的最簡單方法。 您還可以根據需要使用會話存儲。 如果您不希望該主題在關閉窗口時持續存在，請使用會話存儲；如果您希望該主題持續存在，除非明確更改，請使用本地存儲。