如何将商品保存在购物车中？ Javascript和JQuery只有

问题描述：

我是新来的，我有一个问题。当我刷新网站（或从另一侧导航）时，我希望我的购物车中的商品能够保存。如何将商品保存在购物车中？ Javascript和JQuery只有

这是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>

这里是我的脚本文件。我想我必须加载并保存代码，但它不起作用。我试图进入保存和加载 - 的功能，但什么是错的：

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

哦，我把loadCart改正为loadCart（）; ！ – Mnktra

答

我想从我的购物车中的物品时，我刷新页面

也许这有助于保存：

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

或写入的jQuery：

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

saveItems（）将在访问者离开网站时被调用。

它不工作... – Mnktra

答

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

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

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

不要使用localStorage的。

如何将商品保存在购物车中？ Javascript和JQuery只有

相关推荐