I’m making favorite buttons that saves them with localStorage
in a different page. I added those favorite buttons to every paragraph. I don’t want to write a lots of same codes for each of them. The question is that, is there any way to make same buttons work independently and save their parent objects to another page. So far I’ve made just one favorite button to one paragraph and I’ve managed to save it to a different page. Here’s my code:
<form action="pages/login_screen.html"> <p>A<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span></p> <p>B<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p> <p>C<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p> <p>D<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p> <p>E<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p> <script> $(window).on('load',function(){ if(localStorage.toggled != "with_toggle"){ $(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>'); }else{ $(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>'); } }); $('.heart').toggleClass(localStorage.toggled); $('.heart').on('click',function(){ if (localStorage.toggled != "with_toggle") { $(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>'); $('.heart').toggleClass("with_toggle", true); localStorage.toggled = "with_toggle"; localStorage.removeItem("paragraphValue"); } else { $(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>'); $('.heart').toggleClass("with_toggle", false); localStorage.toggled = ""; var paragraph = document.querySelector(".heart").parentNode.innerHTML; localStorage.setItem("paragraphValue", paragraph); return false; } }); </script> <form action="pages/login_screen.html">
Here’s the second page:
<div id="favorites"><!--FAVORITES HERE--></div> <script> document.getElementById("favorites").innerHTML = localStorage.getItem("paragraphValue"); </script>
Advertisement
Answer
You need to save the likes in an array and save the array
NOTE I remove the span and added the class to the <i>
https://jsfiddle.net/mplungjan/c8zf07rh/
$(function() { const swapToggle = ($heart, toggle) => { $heart.toggleClass("fa-heart-o", toggle); $heart.toggleClass("fa-heart", !toggle); }; const $hearts = $(".heart"); const toggleString = localStorage.getItem("toggles"); console.log(toggleString) const toggles = toggleString ? JSON.parse(toggleString) : $hearts.map(function() { return $(this).hasClass('fa-heart') }).get(); // get all hearts on page $hearts.each(function(i, elem) { // initialise from localStorage swapToggle($(this), toggles[i]) $(this).data("idx", i); // save position in array }) $('.heart').on('click', function() { const idx = +$(this).data("idx"); // position in array toggles[idx] = !toggles[idx]; // actual toggling swapToggle($(this), toggles[idx]) localStorage.setItem("toggles", JSON.stringify(toggles)) }) });