CODEWITHSUNDEEP
javascripthtmljqueryarrayslocal-storage
Safina Siddique
Safina Siddique

Reputation: 99

Unable to get Array from LocalStorage Jquery

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);

Upvotes: 2

Views: 77

Answers (1)

Abin Thaha
Abin Thaha

Reputation: 4633

There issue in your code as of I found is:

  1. Use 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>

Upvotes: 1

Related Questions