Hopefully I can articulate my issue clearly.
I am implementing a feature where CSS themes change upon button clicks. When a specific theme button is clicked, the corresponding classname is saved to LocalStorage. However, since the key and value in LocalStorage are constantly changing, I would like to retrieve whatever is currently set in LocalStorage after the click event, rather than a hardcoded value. My code uses jQuery for handling button clicks, and below is the snippet. Any assistance would be highly appreciated.
$(document).ready(function(){
$('#dark').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-dark');
localStorage.clear();
localStorage.setItem('theme-dark', ['theme-dark']);
localStorage.getItem('theme-dark');
});
$('#light').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-light');
localStorage.clear();
localStorage.setItem('theme-light', ['theme-light']);
localStorage.getItem('theme-dark');
});
$('#beaker').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-beaker');
localStorage.clear();
localStorage.setItem('theme-beaker', ['theme-beaker']);
localStorage.getItem('theme-dark');
});
$('#outrun').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-outrun');
localStorage.clear();
localStorage.setItem('theme-outrun', ['theme-outrun']);
localStorage.getItem('theme-dark');
});
var localItem = localStorage.getItem('theme-outrun');
$('body').addClass(localItem);
});