I made an array and adding list items to it dynamically, saving it to localStorage.
array is being saved in localStorage properly, but I am unable to get it back and append it to the 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);There issue in your code as of I found is:
cartItem2= "<li class instead of cartItem2= $("<li class, because array item cannot be a DOM element when saving to localStorage.Check the below code, even though it is throwing error here in SO snippet, I checked in my local and it is working as expected.
$(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>