Like and dislike button with local storage-CodePudding

I have my like and dislike buttons which you can toggle but I would like to know how to use local storage to make it have the same position when I refresh the page

If anyone can help me with this

Thanks

the code is attached below

var btn1 = document.querySelector('#green');
var btn2 = document.querySelector('#red');

btn1.addEventListener('click', function() {
  
    if (btn2.classList.contains('red')) {
      btn2.classList.remove('red');
    } 
  this.classList.toggle('green');
  
});

btn2.addEventListener('click', function() {
  
    if (btn1.classList.contains('green')) {
      btn1.classList.remove('green');
    } 
  this.classList.toggle('red');
  
});

body{
  margin: 40px;
}

button{
  cursor: pointer;
  outline: 0;
  color: #AAA;

}

.btn:focus {
  outline: none;
}

.green{
  color: green;
}

.red{
  color: red;
}

<script src="https://use.fontawesome.com/fe459689b4.js"></script>

  <button  id="green"><i  aria-hidden="true"></i></button>
  <button  id="red"><i  aria-hidden="true"></i></button>

CodePudding user response：

You can do this by modifying your js code a little bit.
This saves the state and clicks the buttons automaticly on reload.

var btn1 = document.querySelector('#green');
var btn2 = document.querySelector('#red');

btn1.addEventListener('click', function() {
  
    if (btn2.classList.contains('red')) {
      btn2.classList.remove('red');
    } 
  this.classList.toggle('green');
localStroage.setItme("like", "like");
  
});

btn2.addEventListener('click', function() {
  
    if (btn1.classList.contains('green')) {
      btn1.classList.remove('green');
    } 
  this.classList.toggle('red');
localStroage.setItme("like", "dislike");

  
});
window.onload = function () {
if (localStorage.getItem("like") == "like") {
document.getElementById('green').click()
}
else {
    document.getElementById('red').click()
}

CodePudding user response：

Saving info into Local Storage

For saving info into Local Storage you must call the method window.localStorage.setItem([KEY], [VALUE]).
Take in mind that you can only save String type into local storage, so if you want to save an Array, of an Object you must call JSON.stringify([YOURDATA]) before saving it into Local Storage.

Load info from Local Storage

For loading info into Local Storage you must call the method window.localStorage.getItem([KEY]).
As I already mention before this data saved is a String so if you want to take another type of data you must parse it (Ex.: JSON.parse([YOURDATA]), parseInt([YOURDATA])).

As a plus you can remove complete the key and the data with window.localStorage.removeItem([KEY]) method.

Note: [KEY], [VALUE] and [YOURDATA] are obviously placeholders.

CodePudding user response：

Try this.

const btn1 = document.querySelector('#green');
const btn2 = document.querySelector('#red');

const likeStatus = localStorage.getItem('like-status');
if (likeStatus) {
  if (likeStatus === 'liked') {
    btn1.classList.add('green');
  }
  if (likeStatus === 'disliked') {
    btn2.classList.add('red');
  }
}

btn1.addEventListener('click', () => {
  setButtonColorAndAddToLocalStorage(btn1, 'green', btn2, 'red', 'liked');
});

btn2.addEventListener('click', () => {
  setButtonColorAndAddToLocalStorage(btn2, 'red', btn1, 'green', 'disliked');
});

setButtonColorAndAddToLocalStorage = (elm, elmClass, altElm, altElmClass, status) => {
  const elmStatusSet = elm.classList.contains(elmClass);
  elm.classList.toggle(elmClass);
  altElm.classList.remove(altElmClass);
  localStorage.setItem('like-status', elmStatusSet ? '' : status);
};