-2

So, I am creating a "favorites page" using local storage to store the items that you click to add to favorites, the items are normal cards like this (just an example):

<div class="card__box"> 
            <div class="heart-wrapper"><a href="#" class="fas fa-heart" id="auditoria"></a></div>
            <div onclick="link('index.html?BI=auditoria')">
                <div class="card__icon"><img src="./assets/icons/auditoria.png"></div>
                <div class="icon__text">
                    <span class="icon__header"><strong>Auditoria</strong></span>
                </div>
            </div>
        </div>

I am saving them in local storage with outer.HTML (how localStorage is saving them)

the thing is, when I try to show them in the HTML the LocalStorage give the value with some alterations like bars "/" and "\n". (like this): "<div class="card_mini_box"> \n <div class="times-mini-wrapper"><a href="#" class="fas fa-times" id="auditoria" aria-hidden="true">\n <div onclick="link('index.html?BI=auditoria')">\n <div class="card_mini_icon"><img src="./assets/icons/auditoria.png">\n <div class="icon_mini_text">\n <span class="icon_mini_header">Auditoria\n \n \n "

As u can see all messed up.

I am saving them in localstorage like this:

let favorites = JSON.parse(localStorage.getItem('favorites')) || []

        const source = favdiv.outerHTML;
        
        favorites.push(source);
        localStorage.setItem('favorites', JSON.stringify(favorites));

(favdiv is the whole div selected)

And I am trying to show them in HTML like this:

    var output = document.getElementById("mini__cards");
    var element = document.createElement("div");
    element.textContent = localStorage.getItem('favorites');
    output.appendChild(element);

please help me I tried a lot of different methods and none of them worked.

Already Tried saving with innerHTML and also tried to put them in html with innerHTML as well.

Igor Gabriel Monteiro
  • 1
  • 1

1 Answers1

0

for this method to work, some details were missing when saving and showing the favorites.

When getting the div, use innerHTML, it gets the elements inside the selected div, so there is no risk of duplicating IDs. Before saving, removing breaking lines. When showing data, remember to use a loop to show all stored data.

Your code would look like this to save:

var favorites = JSON.parse(localStorage.getItem("favorites")) || [];

var favdiv = 
document.getElementById("divs").innerHTML.replace(/(\r\n|\n|\r|\s\s)/gm, "");
favorites.push(favdiv);

localStorage.setItem("favorites", JSON.stringify(favorites));

Using replace, I remove line breaks, with \n and \r.

And to view the saved divs, I use a forEach to go through the entire array, create a template and show its content as the last element:

var favorites = JSON.parse(localStorage.getItem("favorites"));
var output = document.getElementById("mini__cards");

favorites.forEach((favorite) => {
  let tempElement = document.createElement("template");
  tempElement.innerHTML = favorite.trim();
  output.append(tempElement.content);
});

More detailed explanation about above code: https://stackoverflow.com/a/35385518/20815693

This is the result for your case, using jquery this code can be reduced and easier to handle DOM. I hope I have helped you.

Wilker Lopes
  • 1
  • 1