JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="chngeme">
<li class="red"></li>
<li class="blue"></li>
<li class="green"></li>
</ul>
CSS
.red {
background-color: orange;
}
.blue {
background-color: pink;
}
.green {
background-color: yellow;
}
JavaScript
$('ul.chngeme li').click(function() {
var color = $(this).css('background-color');
$('body').css('background-color', color);
if (typeof(Storage) !== 'undefined') {
// Store
localStorage.setItem('colorvalue', color);
}else {
$('#result').html('Sorry, your browser does not support Web Storage...!');
}
});
$(document).ready(function() {
if (typeof(Storage) !== 'undefined') {
// Retrieve
var color = localStorage.getItem('colorvalue');
$('body').css('background-color', color);
}else {
$('#result').html('Sorry, your browser does not support Web Storage...!');
}
});