在页面更改或页面刷新时保持启用主题

Question

我有一个带有一些jquery的按钮，这个按钮可以将主题从暗切换到亮或从亮切换到暗。即使在页面刷新或切换到其他页面后，我也希望此按钮保持启用状态。我该怎么办呢!

Answer 1

你必须将数据存储在cookies或Session中。

这样，即使在刷新页面时，也会保存更改。

您还可以使用JavaScript将数据存储在cookies中。

假设用户将背景颜色更改为#33FFEA。

要在cookies中存储此背景颜色，可以使用以下代码：

localStorage.setItem("backgroundColor", "#33FFEA");

现在，为了接收从cookie返回的数据，您可以使用以下代码：

document.body.style.backgroundColor=localStorage.getItem("backgroundColor");

要将保存的颜色直接添加到页面load上的<body> ，请使用以下代码(编译代码)：

<body onload="LightDarkMode()">
<script>
funtion LightDarkMode()
{
document.body.style.backgroundColor=localStorage.getItem("backgroundColor");
}
</script>

您必须记住，对于上述代码，颜色已经存储在cookies中。

Answer 2

您可以使用本地存储机制来实现这一点，我假设您具有如下所示的函数来更改主题

function change_theme(){
 /*your change theme jquery*/
 localStorage.setItem("theme",'your css class'); //setting theme to local storage
}

在页面加载上获取此内容的

$( document ).ready(function() {
 var theme = localStorage.getItem('theme'); //getting back theme from localstorage  
 $( "body" ).addClass(theme);  //adding class to body tag
 });