Некоторые элементы LocalStorage не отображаются

Question

У меня есть 5 пунктов в LocalStorage, однако, когда я пытаюсь выводить все файлы,

только 2 элементы выводятся, а не все.

JS, который ставит в LocalStorage:

$(document).ready(function() { 
    $.fn.SaveToCart = function (id, iName, iAlbum, iPrice) { 
     var quantity = 0; 
     if (localStorage.getItem('Product_' + id) === null) { 
      quantity = 1; 
     } else { 
      var tempItem = JSON.parse(localStorage.getItem('Product_' + id)); 
      var tempQuantity = parseInt(tempItem['quantity']); 
      quantity = tempQuantity + 1; 
     } 
     var cartItem = { 
      'quantity': quantity, 
      'name': iName, 
      'album': iAlbum, 
      'price': iPrice 
     } 
     localStorage.setItem('Product_' + id, JSON.stringify(cartItem)); 
    }; 

Корзина JS:

function ShoppingCart() { 

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


    for (var i = 0; i < localStorage.length - 1; i++) { 
     var keyName = localStorage.key(i); 
     if (keyName.indexOf('Product_') == 0) { 
      var product = localStorage.getItem(keyName); 

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

      var result = JSON.parse(product); 

      totalPrice = 0; 
      productName = result.name 
      productAlbum = result.album; 
      productQuantity = parseInt(result.quantity); 
      productPrice = parseFloat(result.price).toFixed(2); 
      productSubTotal = parseInt(productQuantity) * parseFloat(productPrice).toFixed(2); 

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


      var TotalOutput = outputName + outputAlbum + outputQuantity + outputPrice + outputSubTotal; 

      document.getElementById("Cart-Contents").innerHTML = document.getElementById("Cart-Contents").innerHTML + TotalOutput; 
      totalPrice += parseFloat(totalPrice) + parseFloat(productSubTotal); 
      productSubTotal = productSubTotal + productSubTotal; 
     } 
     i++; 


    } 
    totalPrice = productSubTotal; 

    localStorage.setItem("price", totalPrice); 

    var outputTotal = "<br><br><h1><table><tr><td><b>TOTAL:</b> EUR " + totalPrice + "</td></tr></table></h1>"; 
    document.getElementById("total-price").innerHTML = document.getElementById("total-price").innerHTML + outputTotal; 


} 

function ClearCart() { 

    localStorage.clear(); 
    document.location.reload(true); 

} 

window.onload = ShoppingCart; 

    </script> 

HTML:

<div id="Cart-Contents"></div> 
<div id="total-price"></div> 

Кроме того, я еще одна проблема, общая стоимость не получает вычисленной правильно. Я получаю 28.12 в общей сложности 14.06 + 16.40. Почему это происходит?

Чтобы дать Вам идею:

http://i.imgur.com/RmftSoU.png

http://i.imgur.com/qO8FQN8.png

Answer 1

Измените ваш цикл для этого: for (var i = 0; i < localStorage.length; i++){.

И не добавляйте i++; в конец корпуса вашей петли.

Оба будут заставлять вашу петлю не ударять по всем предметам по разным причинам.