使用LocalStorage保存和加载购物车 [英] Save and load shopping cart with LocalStorage

问题描述

我有以下代码:

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.

推荐答案

您可以使用HTML5 localstorage，因为存储在javascript变量中的信息将通过页面刷新来刷新

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

但是最好的方法是通过其余的API调用将这些信息持久化到您的后端(或Web服务器).因此，即使用户从其他计算机登录，他的确也会看到他添加到购物车中的物品.

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.

理想情况下，您应该将数据存储在localStorage中，而不是HTML中-由于数据更具操纵性，因此请修改您的代码:

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("|")
}

您可能还希望在设置项目时添加异常处理，请在此处检查: https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/setItem

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

这篇关于使用LocalStorage保存和加载购物车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！