local storage in active or unactive thumbs up button-CodePudding

I have my like button but I don't know how to use javascript local storage so that when you refresh the page the buttons don't change

the buttons work correctly so that when you click them it turns to thumbs up or down

function myFunction(x) {
    x.classList.toggle("fa-thumbs-down");
  }

.fa {
    font-size: 50px;
    cursor: pointer;
    user-select: none;
    color: red;
  }
  
  .fa:hover {
    color: rgb(12, 139, 0);
  }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>

 <i onclick="myFunction(this)" ></i>
    <i onclick="myFunction(this)" ></i>
    <i onclick="myFunction(this)" ></i>
    <i onclick="myFunction(this)" ></i>
    <i onclick="myFunction(this)" ></i>

CodePudding user response：

const isToggled = localStorage.getItem('is-toggled') === 'true'

document.querySelectorAll('i').forEach(e => {
  e.classList.toggle("fa-thumbs-down", isToggled);
})

function myFunction(x) {
  const hasClass = x.classList.contains('fa-thumbs-down')
  x.classList.toggle("fa-thumbs-down", hasClass);
  localStorage.setItem('is-toggled', hasClass)
}

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
  color: red;
}

.fa:hover {
  color: rgb(12, 139, 0);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>

  <i onclick="myFunction(this)" ></i>
  <i onclick="myFunction(this)" ></i>
  <i onclick="myFunction(this)" ></i>
  <i onclick="myFunction(this)" ></i>
  <i onclick="myFunction(this)" ></i>

CodePudding user response：

I would delegate

I also assume you want all the thumbs to toggle that are to the left of the clicked thumb?

Note that StackSnippets do not allow localStorage so I commented the code out. Just uncomment and remove the very first line on your server

const localStorage = `[1,1,1,0,0]`; // remove on own server
// const localStorage = localStorage.getItem("thumbs"); // uncomment on own server
let thumbValue = JSON.parse(localStorage || `[]`); // get or create the array
const container = document.getElementById("thumbs");
const thumbs = [...container.querySelectorAll(".fa")];
thumbs.forEach((thumb, i) => {
  thumb.dataset.idx = i
  thumb.classList.toggle("fa-thumbs-down", thumbValue[i]); // set the thumbs
})
container.addEventListener("click", e => {
  const tgt = e.target;
  const idx =  tgt.dataset.idx;
  const up = tgt.classList.contains("fa-thumbs-up")
  const down = tgt.classList.contains("fa-thumbs-down")
  thumbValue = thumbs.map((thumb, i) => {
    if (i <= idx) {
      thumb.classList.toggle("fa-thumbs-down",up)
      thumb.classList.toggle("fa-thumbs-up",down)
    }
    return thumb.classList.contains("fa-thumbs-up")
  })
  console.log(thumbValue)
  // localStorage.setItem("thumbs",JSON.stringify(thumbValue)); // uncomment on your server
})

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
  color: red;
}

.fa:hover {
  color: rgb(12, 139, 0);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="thumbs">
  <i ></i>
  <i ></i>
  <i ></i>
  <i ></i>
  <i ></i>
</div>