JavaScript - JSON - LocalStorage

任何人都可以告訴我爲什麼當我試圖運行這段代碼時，我的頁面上沒有輸出任何內容？JavaScript - JSON - LocalStorage

我想解析localStorage項目，並使用for循環爲每個項目創建一個表。然後我加上總價。

注意：localStorage包含3個項目，並且是不是爲空。

<!DOCTYPE html> 
<html> 
<head> 
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
    <meta content="utf-8" http-equiv="encoding"> 
    <style>img{ height: 100px; float: left; }</style> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 


    <script> 

     function ShoppingCart() { 

      var totalPrice = 0; 
      var output; 

     for (var i = 0; i < localStorage.length; i++){ 

      var product = localStorage.getItem('Product_'+i); 

      var result = JSON.parse(product); 

      var productName; 
      var productAlbum; 
      var productQuantity; 
      var productPrice; 
      var productSubTotal = 0; 
      var totalPrice; 

      productName = result.name 
      productAlbum = result.album; 
      productQuantity = result.quantity; 
      productPrice = parseFloat(result.price); 
      productSubTotal = productQuantity * productPrice; 

      totalPrice = totalPrice + productSubTotal; 


      outputName = "<div id='cart-table'><table><tr><td>NAME:" + productName + "</td></tr></div>" ; 
      outputAlbum = "<tr><td>ALBUM:" + productAlbum + "</td></tr>" ; 
      outputQuantity = "<tr><td>QUANTITY:" + productQuantity + "</td></tr>"; 
      outputPrice = "<tr><td>PRICE:" + productPrice + "</td></tr>"; 
      outputSubTotal = "<tr><td>SUB-TOTAL" + productSubTotal + "</td></tr></table><br><br>"; 




         } 

      var outputTotal = "<table><tr><td>" + totalPrice + "</td></tr></table>"; 
      var TotalOutput = outputName + outputAlbum + outputQuantity + outputPrice + outputSubTotal + outputTotal; 
      document.getElementById("Cart-Contents").innerHTML=TotalOutput 

        alert(TotalOutput); 
     } 

      window.onload = ShoppingCart(); 


    </script> 


</head> 
<body> 
<div id="wrapper"> 

    <header id="header"> 
     <strong><table id="menu"><tr><td>Home</td><td>Contact</td><td>Login</td><td></td><td>Products</td></tr></table></strong> 
    </header> 
    <section id="middle"> 

     <div id="container"> 
      <div id="content"> 
       <a class="" onclick="ShoppingCart()"><span>Cart</span></a> 
       <div id="Cart-Contents"> 


      </div> 


      </div><!-- #content--> 
     </div><!-- #container--> 

     <aside id="sideLeft"> 
      <strong>Left Sidebar:</strong> 
     </aside><!-- #sideLeft --> 

     <aside id="sideRight"> 
      <strong>Right Sidebar:</strong> 
     </aside><!-- #sideRight --> 

    </section><!-- #middle--> 

</div><!-- #wrapper --> 



<footer id="footer"> 
    <strong>by Brian Livori</strong> 
</footer><!-- #footer --> 
</body> 
</html>

來源

2013-04-25 Brian

你肯定在'項目localStorage'與「Product_」開始？根據您設置項目的方式，它可能沒有長度。無論哪種方式，你可能想循環使用「for in」循環 – Ian 2013-04-25 01:05:40

它是簡單的，只是改變

window.onload = ShoppingCart();

到

window.onload = ShoppingCart;

window.onload是一個回調函數引用。當您分配ShoppingCart()時 - 您實際上將功能執行的結果分配給window.onload。

例這裏http://jsbin.com/urikub/1/edit

來源

2013-04-25 00:58:22 Vadim

解釋**爲什麼**。對我們來說可能很明顯發生了什麼，但不是OP。 – Ian 2013-04-25 01:00:08

@Vadim Nope，我仍然沒有輸出。頁面保持空白！ – Brian 2013-04-25 01:01:39

啊，它的工作，但名稱和專輯沒有得到顯示！任何幫助？ – Brian 2013-04-25 01:06:22

JavaScript - JSON - LocalStorage

回答

相關問題