使用 LocalStorage 保存和加载购物车答案

【问题标题】：Save and load shopping cart with LocalStorage使用 LocalStorage 保存和加载购物车
【发布时间】：2019-08-02 04:16:35
【问题描述】：

我有以下代码：

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

我希望用户能够保存购物车并在刷新页面时再次加载它。我该怎么做？

现在，我添加了保存和加载功能，但现在它不会将项目添加到表格中，它只是复制整个表格。

【问题讨论】：

请提供您尝试使用localstorage完成的代码
我添加了代码

标签： javascript local-storage cart shopping-cart shopping

【解决方案1】：

您可以使用 HTML5 localstorage，因为存储在 javascript 变量中的信息会随着页面刷新而刷新

但最好的方法是通过一些 REST API 调用将此信息保存到您的后端（或 Web 服务器）。因此，即使用户从其他机器登录，他也会看到他添加到购物车中的商品。

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

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/en-US/docs/Web/API/Storage/setItem

【讨论】：

你能分享你的本地存储代码吗，因为它会在你的页面刷新过程中持续存在..
修改了你的代码。您还应该探索将这些值存储在某些后端，因为这将跨会话和跨设备保留用户购物车数据

【解决方案2】：

您确实希望将此数据存储在服务器端，因为用户可能会从许多不同的机器访问您的站点/应用程序。 HTML5 localstorage 对于每台机器都是本地的。

这归结为一个系统，用户在与您的应用交互时匿名登录，但使用唯一的服务器端 ID。一旦他们登录（创建帐户），您就可以将他们的帐户合并到他们的匿名帐户。现在，当用户从他们的其他/工作计算机登录到您的网站时，购物车仍然存在。

从头开始设置并不简单，因此有很多开发人员产品/系统可以为您完成这项繁重的工作，例如 Firebase。

【讨论】：