2017-09-23 3 views
0

私はここに新しいと私は問題があります。私はサイトをリフレッシュする(または別の側からナビゲートする)ときにショッピングカートのアイテムを保存したい。商品をショッピングカートに保存するにはどうすればいいですか? 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() 
} 
+0

ohと、loadCartをloadCart()に修正しました。 !! – Mnktra

答えて

0

私はサイト

を更新したときに、私は私のショッピングカートからアイテムを保存したい多分、このことができます:

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

やjqueryの中で書かれた:

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

saveItems()は、訪問者がサイトを離れるときに呼び出されます。

+0

それは動作していません... – Mnktra

0

使用coockieプラグイン - https://plugins.jquery.com/cookie/

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

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

のlocalStorageを使用しないでください。

関連する問題