I have a code which is changing colour of thumb when it is clicked:
<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>
var state = true;
function like(element){
if(state){
var currentElement = element.querySelector('.fa-thumbs-up');
currentElement.style.color = "orange";
}else{
var currentElement = element.querySelector('.fa-thumbs-up');
currentElement.style.color = "black";
}
state = !state;
}
I want to save the colour in localstorage: User click on like and it is liked untill he dislike it (no when he refreshed).
You can use localSotrage.setItem(key, value) for storing the data and localStorage.getItem(key) to retreive the data.
For the case you wanted use like this
var state = true;
function like(element){
if(state){
var currentElement = element.querySelector('.fa-thumbs-up');
currentElement.style.color = "orange";
localStorage.setItem("storedColor", "orange");
}else{
var currentElement = element.querySelector('.fa-thumbs-up');
currentElement.style.color = "black";
localStorage.setItem("storedColor", "black");
}
state = !state;
}
window.addEventListener('DOMContentLoaded', e => {
currentElement.style.color = localStorage.getItem("storedColor");
});