How to transfer different parents data to other page with help of the same buttons using LocalStorag-CodePudding

I'm made half of the code with the help of mplungjan. So far I've made multiple(same) buttons for multiple paragraphs. Those buttons are like a favorite buttons and I want to pass those favorited paragraphs to a different page. For my more information visit this question, where I tried to add same buttons and work with them independently. Here the code that I wrote so far(Line of code that saves paragraph only saves "A" not others. Even if the other favorite buttons are checked. Only saves "A"):

<form action="pages/login_screen.html">
    <p>A<i  aria-hidden="true"></i></p>
    <p>B<i  aria-hidden="true"></i></p>
    <p>C<i  aria-hidden="true"></i></p>
    <p>D<i  aria-hidden="true"></i></p>
    <button><a href="pages/login_screen.html">GO</a></button>
</form>
<script>
$(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))
    localStorage.setItem("paragraphValue", $(".heart").parent().html());  //Saves paragraph
  })
});
</script>

And this is my second page:

<div id="favorites"><!--FAVORITES HERE--></div>
<script>
    document.getElementById("favorites").innerHTML = localStorage.getItem("paragraphValue");
</script>

CodePudding user response：

loop to all .heart.fa-heart-o class, working demo on jsfiddle (open browser console)

$(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))
    // replace 
    // localStorage.setItem("paragraphValue", $(".heart").parent().html());
    // with
    var favs =$('.heart.fa-heart-o').map((i, f)=> `<p>${f.parentElement.innerHTML}</p>`).get().join('\n')
    localStorage.setItem("paragraphValue", favs); //Saves paragraph
    
    console.clear();
    console.log(favs)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<form action="pages/login_screen.html">
  <p>A<i  aria-hidden="true"></i></p>
  <p>B<i  aria-hidden="true"></i></p>
  <p>C<i  aria-hidden="true"></i></p>
  <p>D<i  aria-hidden="true"></i></p>
  <button><a href="pages/login_screen.html">GO</a></button>
</form>

CodePudding user response：

The problem is with this line of code:

paragraphValue = $(".heart").parent().html(); //Saves paragraph

From the code, it seems you want to save the entire form to localStorage. Yet, "parent" in this case is NOT the form, but each <p> around each .heart. So rather than saving the entire form, you are only saving the first .heart

One way to fix the problem would be to add an enclosing <div id="hearts"> and select that:

paragraphValue = $("#hearts").html(); //Saves paragraph

Run the code snippet below to test. Note that localStorge is disabled in the snippet for permissions reasons, but just ignore that as that part of your code works fine.

const swapToggle = ($heart, toggle) => {
  $heart.toggleClass("fa-heart-o", toggle);
  $heart.toggleClass("fa-heart", !toggle);
};

const $hearts = $(".heart");
let paragraphValue = "";
let toggleString = "{}"; // localStorage.getItem("toggles");

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))
    //localStorage.setItem("paragraphValue", $(".heart").parent().html()); //Saves paragraph
    
    toggleString = JSON.stringify(toggles);
    //paragraphValue = $(".heart").parent().html(); // <-- REMOVE
    paragraphValue = $("#hearts").html();  // <-- ADD
    //console.log(paragraphValue);

})

$('#go').click(function() {

  $("#page1").hide();
  $("#page2").show();

  //console.log(paragraphValue);

  document.getElementById("favorites").innerHTML = paragraphValue; // localStorage.getItem("paragraphValue"); 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

<div id="page1">
  <div id="hearts"> <!- Add -->
    <p>A<i  aria-hidden="true"></i></p>
    <p>B<i  aria-hidden="true"></i></p>
    <p>C<i  aria-hidden="true"></i></p>
    <p>D<i  aria-hidden="true"></i></p>

  </div>
      <button id="go">GO</button>
</div>

<div id="page2" style="display:none;">
  <h3>Page 2</h3>
  <div id="favorites">
    <!--FAVORITES HERE-->
  </div>
</div>