Solution 1 :

I wouldn’t be storing div elements at all, since people won’t be buying div elements from you and there’s no reason to bloat up localStorage with data and UI layer content. Instead, store the data that those elements contain and later, when you need to get that data out of storage, you can create div elements (or any UI) to hold them for display on the page.

Here’s an example that shows why it’s better to not store the presentation with the data. I’ll show you that I can create two different presentations from one set of data (it won’t work here in the Stack Overflow snippet environment, but it will here in this Fiddle):

let cart = [];
const list = document.querySelector("select");
document.querySelector("button").addEventListener("click", function(){
  cart.push(list.value); // Update the cart
  localStorage.setItem("cart", JSON.stringify(cart)); // store cart

document.querySelector("#show").addEventListener("click", function(){
  // Presentation #1

  // Loop over all the items in the array that is created by
  // converting the JSON in local storage to an array
    let row = document.createElement("div"); // make a div for the item
    row.textContent = item; // populate the div
    document.body.appendChild(row); // Put item in doc.
  // Presentation #2

  // Same data and same technique to access it
  let tbl = document.createElement("table");
    // But different presentation
    let row = document.createElement("tr"); 
    let cell = document.createElement("td");
    cell.textContent = item; // populate the div
  document.body.appendChild(tbl); // Put item in doc.
table, td {
  border:1px solid grey;
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
  <option>Item 4</option>
  <option>Item 5</option>
  <option>Item 6</option>  
<button>Add to cart</button>
<button id="show">Show Cart</button>

Problem :

I am making an E-commerce website and facing a problem in shopping cart part.

I defined my shopping cart as an array. When an user clicked AddToCart button it will store that < div > element of the item in the array. I want to store this array in local storage or any kind of storage. This is what I have now.

    function check() {
      localStorage.setItem("shoppingCart", JSON.stringify(shoppingCart));
      items = JSON.stringify(localStorage.getItem("users"));

My Firefox console tab gives me this when I added two items.

Array [ div.item, div.item]                      products.html:88:15
Storage { shoppingCart: "[{},{}]", length: 1 }   products.html:91:15

So two items were added to the local storage. But instead of an array of < div > elements it gives an array of empty objects.

My question is how do I add an array of html < div > elements in local storage (or any other kind of storage) so that my shoppingcart list will remain after I reload the webpage.

Thank you for reading my question, I hope you understood my problem.


Comment posted by blex

Divs (HTMLElements) are Objects, with no own properties. When you stringify them, you get

Comment posted by taikikun

I am also working with phpmyadmin. There I have created a database for my products. Is it a better idea to store the names of my products in stead of div elements? Also thank you for your answer !

Comment posted by Scott Marcus

@taikikun Yes. As I said, you aren’t selling

Comment posted by taikikun

My initial idea was to create a database for shopping cart in mySQL. But since I didn’t see an importance of storing that information in my server. I decided to store it in local storage (or cookie) by using JavaScript. Thanks for enlightening me, I appreciate that!

Comment posted by Scott Marcus

@taikikun You’re welcome. Check out my updated answer which shows a little more clearly the benefit of separating the data from the presentation and don’t forget to mark this as “the” answer, by clicking the checkmark at the top-left of the answer.