我有以下代码:
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");
}
我希望用户能够在刷新页面时保存购物车并再次加载。我怎样才能做到这一点?
现在,我添加了函数save和load但是现在它没有将项添加到表中,它只是复制整个表。
您真的想要存储此数据服务器端,因为用户可以从许多不同的计算机访问您的站点/应用程序。 HTML5 localstorage是每台机器的本地存储。
这归结为一个系统,用户在与您的应用交互时匿名登录,但具有唯一的服务器端ID。一旦他们登录(创建帐户),您将他们的帐户合并到他们的匿名帐户。现在,当用户从其他/工作计算机登录到您的站点时,购物车仍然存在。
从头开始设置并不简单,所以有很多开发人员产品/系统可以为你做这个繁重的工作,比如Firebase。
您可以使用HTML5 localstorage,因为存储在javascript变量中的信息将通过页面刷新刷新
但最好的方法是通过一些其他的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