Hice una matriz y le agregué elementos de lista dinámicamente, guardándolos en localStorage .
La matriz se está guardando correctamente en localStorage , pero no puedo recuperarla y agregarla al DOM.
const arr = []; var cartItem = $( "<li class='newItem'> <p class='id'>1</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>" ); var cartItem2 = $( "<li class='newItem'> <p class='id'>2</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>" ); arr.push(cartItem, cartItem2); localStorage.setItem("cartItem", JSON.stringify(arr)); var data = localStorage.getItem("cartItem"); var updatedData = JSON.parse(data); $("#temp").append(updatedData);El problema en su código a partir de que lo encontré es:
cartItem2= "<li class en lugar de cartItem2= $("<li class , porque el elemento de matriz no puede ser un elemento DOM al guardar en localStorage.Verifique el código a continuación, aunque arroja un error aquí en el fragmento SO , verifiqué en mi local y funciona como se esperaba .
$(document).ready(function () { var arr = []; var cartItem = "<li class='newItem'> <p class='id'>1</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>"; var cartItem2 = "<li class='newItem'> <p class='id'>2</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>"; arr = [cartItem, cartItem2]; localStorage.setItem("cartItem", JSON.stringify(arr)); var data = localStorage.getItem("cartItem"); var updatedData = JSON.parse(data); $("#temp").append(updatedData); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="temp"></ul>