Run same button function after refresh - jquery

Question

I have a simple code which changes background color through jquery. but after refresh the color goes back to default and how I could use the same function after reload. I'm using wordpress, can also use php language.

$(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>

You need to persist the state of the user. Depending on the framework you can either use cookies or application storage. — fragmentedreality, Jul 30 '20 at 05:25
Does this answer your question? [Keep CSS from refreshing on page reload](https://stackoverflow.com/questions/48441624/keep-css-from-refreshing-on-page-reload) — Umair Khan, Jul 30 '20 at 05:27

score 0 · Accepted Answer · answered Jul 30 '20 at 05:29

Use 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>

Run same button function after refresh - jquery

1 Answers1