0

I have this heart-shaped favorite button, but the problem is that every time the page is refreshed it's goes clicked to unclicked. I want this button to stay clicked before it's clicked again even if the page refresh. Can someone help me with how to do that?

document.addEventListener("DOMContentLoaded", function() {
  var button = document.getElementsByTagName("button")[0];
  button.addEventListener("click", function(e) {
    button.classList.toggle("liked");
  });
});
html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: none;
  border-style: initial;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #ff3d60;
  cursor: pointer;
  transition: all 0.5s ease;
}

button:focus {
  outline: none;
}

button:hover {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
}

button.liked {
  border-color: #ff8299;
  animation: shadow-grow 2s;
}

button.liked svg {
  animation: heart-grow 0.7s;
}

button.liked .heart {
  fill: #ff8299;
}

button svg {
  width: 20px;
  height: auto;
}

button svg .heart {
  fill: rgba(0, 0, 0, 0.15);
}

button svg .shine {
  fill: #fff;
}

@keyframes shadow-grow {
  0% {
    box-shadow: 0 0;
  }
  50% {
    box-shadow: 0 0 5px 20px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes heart-grow {
  0% {
    transform: scale(3);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
<button aria-label="Favourite">
   <svg width="515.99" height="480.73" version="1.1" viewBox="0 0 515.99347 480.73038" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
      <metadata>
         <rdf:RDF>
            <cc:Work rdf:about="">
               <dc:format>image/svg+xml</dc:format>
               <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
            </cc:Work>
         </rdf:RDF>
      </metadata>
      <defs>
         <path class="heart" id="b" d="m372.59 17.99c-48.54 0-92.99 26.12-118 67.99-24.79-42.41-67.41-68-115.18-68-72.86 0-131.09 59.68-138.55 141.94-0.59 3.63-3.02 22.76 4.35 53.94 10.61 44.98 35.13 85.89 70.89 118.29 11.89 10.79 71.34 64.75 178.37 161.87 108.86-97.12 169.34-151.07 181.43-161.86 35.76-32.41 60.28-73.31 70.89-118.3 7.37-31.17 4.94-50.3 4.36-53.93-7.47-82.26-65.69-141.94-138.56-141.94z"/>
         <path class="shine" id="a" d="m59.07 176.3c0 5.44 4.4 9.84 9.85 9.84 5.44 0 9.84-4.4 9.84-9.84 0-43.44 35.34-78.78 78.78-78.78 5.44 0 9.84-4.4 9.84-9.84 0-5.45-4.41-9.85-9.84-9.85-54.3 0-98.47 44.17-98.47 98.47z"/>
      </defs>
      <g transform="translate(1.9963 -15.98)">
         <use width="100%" height="100%" xlink:href="#b"/>
         <use width="100%" height="100%" xlink:href="#a"/>
         `enter code here`
      </g>
   </svg>
</button>
showdev
  • 28,454
  • 37
  • 55
  • 73
Cory
  • 1
  • 1
    Save the button state in `localStorage` or `sessionStorage`. When the page loads, get the value from storage and update the button state accordingly. – Barmar May 21 '21 at 00:18
  • For reference, see [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) – showdev May 21 '21 at 00:19
  • 1
    Does this answer your question? [Keep added jquery classes after page refresh or page load](https://stackoverflow.com/questions/51606783/keep-added-jquery-classes-after-page-refresh-or-page-load). Also see [How to keep .current class even if page refresh](https://stackoverflow.com/questions/16034917/how-to-keep-current-class-even-if-page-refresh). – showdev May 21 '21 at 00:29

0 Answers0