Question

我是新来的，我有一个问题。我希望在刷新网站时保存购物车中的商品（或从另一侧导航）。

这是HTML代码：

<!doctype html>
<html>
<body>
<h1> Shopping Cart </h1>
<div id='frm'>
        <label>Movie: </label>
        <input type="text" id="pname" size="20"><br>
        <label>Number of tickets: </label>
        <input id='pqty' type='number'><br>
        <label>price class €</label>
        <select id="priceclass"> 
            <option>5</option>
            <option>7</option>
            <option>9</option>
            <option>12</option>
        </select> <br>
        <label></label><button onclick="addItem()"> In the shopping cart </button>
        </div>
    <div id='shopping cart'></div>
</body>
</html>

这是我的脚本文件。我想我必须用加载和保存来编写代码，但它不起作用。我试图输入save和load - 函数，但是出了点问题：

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

function addItem(){
            inames.push(document.getElementById('pname').value); 
            iqtyp.push(parseInt(document.getElementById('pqty').value));
            iprice.push(parseInt(document.getElementById('priceclass').value));

            displayCart();
        }

function displayCart() {
            shoppingcartdata = '<table><tr><th>Movie</th><th>Number of tickets</th><th>Price class € </th><th>Total €</th></tr>';

            total = 0;

            for (i=0; i<inames.length; i++){
                total += iqtyp[i] * iprice[i]
                shoppingcartdata += "<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>"
            }

            shoppingcartdata += '<tr><td></td><td></td><td></td><td>' + total + '</td></tr></table>' 

            document.getElementById('shopping cart').innerHTML = shoppingcartdata;

            saveCart();
}

function saveCart(){
    localStorage.setItem("shoppingcartdata", JSON.stringify(cart));
}

function loadCart(){
    cart = JSON.parse(localStorage.getItem("shoppingcartdata"));
}

loadCart;

function delElement(a){
      inames.splice(a,1);
      iqtyp.splice(a,1)
      iprice.splice(a,1)
      displayCart()
}

Answer 1

我希望在刷新网站时保存购物车中的商品

也许这会有所帮助：

window.onbeforeunload = function(){
  saveCart();
};

或用jquery编写：

$(window).bind('beforeunload', function(){
  saveCart();
});

当访问者离开网站时，将调用saveItems（）。

Answer 2

使用coockie插件 - https://plugins.jquery.com/cookie/

//get coockies
$.cookie('cookie_name');

//set coockies
$.cookie('cookie_name', 'example');

不要使用localstorage。

如何将商品保存在购物车中？ Javascript＆amp;仅限JQuery

2 个答案: