刷新后运行相同的按钮功能 - jquery答案

【问题标题】：Run same button function after refresh - jquery刷新后运行相同的按钮功能 - jquery
【发布时间】：2020-07-30 05:15:50
【问题描述】：

我有一个简单的代码，可以通过 jquery 更改背景颜色。但是刷新后颜色会恢复为默认值以及重新加载后如何使用相同的功能。我用的是wordpress，也可以用php语言。

$(document).ready(function() {
  $("#dark").click(function() {
    $("#body-tech").css("background-color", "black");
    $("#body-tech h1").css("color", "white");
    $("#body-tech .ct-text-block").css("color", "white");
    $("#dark").css("display", "none");
    $("#light").css("display", "")
  })
});

$(document).ready(function() {
  $("#light").click(function() {
    $("#body-tech").css("background-color", "white");
    $("#body-tech h1").css("color", "black");
    $("#body-tech .ct-text-block").css("color", "black");
    $("#light").css("display", "none");
    $("#dark").css("display", "")
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button id="dark">darkmode</button>
<button id="light" style="display:none;">lightmode</button>

【问题讨论】：

你是什么意思 - “但刷新后”？
你需要持久化用户的状态。根据框架，您可以使用 cookie 或应用程序存储。
这能回答你的问题吗？ Keep CSS from refreshing on page reload

标签： javascript php jquery css wordpress

【解决方案1】：

使用localStorage

let bgColor = localStorage.getItem("bgcolor");

document.body.style.backgroundColor = bgColor;

function themeFunc(e){
    localStorage.setItem("bgcolor", e.value);
    document.body.style.backgroundColor = bgColor;
}

<button id="dark" value="black" onclick="themeFunc(this)">Dark</button>
<button id="light" value="white" onclick="themeFunc(this)">Light</button>

【讨论】：