Save and load shopping cart with LocalStorage

问题

I have the following code:

inames = [];
iqtyp = [];
iprice = [];

function bestel() {
  inames.push(document.getElementById('artikel').innerHTML);
  iqtyp.push(parseInt(document.getElementById('hoeveel').value));
  iprice.push(parseInt(document.getElementById('prijs').innerHTML));
  displayCart();
}

function displayCart() {
  cartdata = '<table><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th></tr>';
  total = 0;
  for (i = 0; i < inames.length; i++) {
    total += iqtyp[i] * iprice[i];
    cartdata += "<tr><td>" + inames[i] + "</td><td>" + iqtyp[i] + "</td><td>" + iprice[i] + "</td><td>" + iqtyp[i] * iprice[i] + "</td><td><button onclick='delElement(" + i + ")'>Delete</button></td></tr>";
  }
  cartdata += '<tr><td></td><td></td><td></td><td>' + total + '</td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function save() {
  localStorage.setItem("car", cartdata);
}

function load() {
  document.getElementById("cart").innerHTML += localStorage.getItem("car");
}

I want the user to be able to save the cart and load it again when he refresh the page. How can I do this?

Now, I added the function save and load but now it doesn't add the items to the table, it just copies the whole table.

回答1:

You can use HTML5 localstorage, as information stored in javascript variables would be flushed with page refresh

But the best way would be to persist this information to you backend (or web server), through some rest API call. So even if user logs in from some other machine, he do see his items that he added in the cart.

Ideally you should store data in localStorage, not HTML - as data is more manipulative, modified your code:

inames = [];
iqtyp = [];
iprice = [];

function bestel() {

  load()

  inames.push(document.getElementById('artikel').innerHTML);
  iqtyp.push(parseInt(document.getElementById('hoeveel').value));
  iprice.push(parseInt(document.getElementById('prijs').innerHTML));
  displayCart();

  save()
}

function displayCart() {
  cartdata = '<table><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th></tr>';
  total = 0;
  for (i = 0; i < inames.length; i++) {
    total += iqtyp[i] * iprice[i];
    cartdata += "<tr><td>" + inames[i] + "</td><td>" + iqtyp[i] + "</td><td>" + iprice[i] + "</td><td>" + iqtyp[i] * iprice[i] + "</td><td><button onclick='delElement(" + i + ")'>Delete</button></td></tr>";
  }
  cartdata += '<tr><td></td><td></td><td></td><td>' + total + '</td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function save() {
  localStorage.setItem("inames", inames.join("|"))
  localStorage.setItem("iqtyp", iqtyp.join("|"))
  localStorage.setItem("iprice", iprice.join("|"))
}

function load() {

   inames = (localStorage.getItem("inames") || "").split("|")
   iqtyp = (localStorage.getItem("iqtyp") || "").split("|")
   iprice = (localStorage.getItem("iprice") || "").split("|")
}

You may also wish to add exception handling while setting up items, check here: https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem

回答2:

You really want to store this data server side as a user may access your site/app from a number of different machines. HTML5 localstorage is local to each machine.

What this boils down to is a system where users are signed in anonymously, but with a unique server-side ID, upon interacting with your app. Once they signin (create an account), you merge their account to their anonymous account. Now, when user logs on to your site from their other/work computer, the shopping cart is still there.

This is not simple to setup from scratch so there are plenty of developer products/systems out there to do this heavy lifting for you such as Firebase.

来源：https://stackoverflow.com/questions/55108821/save-and-load-shopping-cart-with-localstorage

标签

javascript

local-storage

cart

shopping-cart

shopping