I had a button that change page theme to dark-mode. when you click on, it works but when refershing the page, changes will be not save. pls help me to fix that????????
html:
<div class="container">
<label for="check">change theme: </label
><input type="checkbox" name="" id="check" class="checkbox" />
</div>
jQuery:
jQuery(document).ready(function () {
jQuery('#check').change(function () {
let data = {
"night_details": "div",
"night": "body",
"tik":"checked",
}
localStorage.setItem("night-theme", JSON.stringify(data));
let theme = localStorage.getItem('night-theme');
if(this.checked) {
jQuery('body').addClass(JSON.parse(theme).night);
jQuery('.container').addClass(JSON.parse(theme).night_details);
console.log(JSON.parse(theme));
jQuery(this).attr("checked", JSON.parse(theme).tik);
}else {
localStorage.clear(theme);
jQuery('body').removeClass(JSON.parse(theme).night);
jQuery('.container').removeClass(JSON.parse(theme).night_details);
jQuery(this).removeAttr("checked");
}
if(localStorage.getItem('night-theme')) {
let theme = localStorage.getItem('night-theme');
jQuery('body').addClass(JSON.parse(theme).night);
jQuery('.container').addClass(JSON.parse(theme).night_details);
jQuery('#check').attr("checked", JSON.parse(theme).tik);
}
else {
localStorage.clear(theme);
jQuery('body').removeClass(JSON.parse(theme).night);
jQuery('.container').removeClass(JSON.parse(theme).night_details);
jQuery('#check').removeAttr("checked");
}
});
});
New contributor
Matin Saadati is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.