Unable to get Array from LocalStorage Jquery

Question

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 = $(
  " 1
 Orange
20 / In Stock 10
+-
 "
);
var cartItem2 = $(
  " 2
 Orange
20 / In Stock 10
+-
 "
);

arr.push(cartItem, cartItem2);

localStorage.setItem("cartItem", JSON.stringify(arr));
var data = localStorage.getItem("cartItem");
var updatedData = JSON.parse(data);
$("#temp").append(updatedData);

user_3315333 · Answer

There issue in your code as of I found is:

Use cartItem2= "
instead of cartItem2= $("
, 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 =
        " 1
 Orange
20 / In Stock 10
+-
 ";
      var cartItem2 =
        " 2
 Orange
20 / In Stock 10
+-
 ";
      arr = [cartItem, cartItem2];

      localStorage.setItem("cartItem", JSON.stringify(arr));
      var data = localStorage.getItem("cartItem");
      var updatedData = JSON.parse(data);
      $("#temp").append(updatedData);
    });

Unable to get Array from LocalStorage Jquery

1 Answers