Javascript localStorage问题-未显示项（JSON/JQUERY）

我正在尝试获取和排序localStorage中的所有项目，并将其输出到HTML页面

这就是我正在做的：

  <script>

    function ShoppingCart() {

        var totalPrice = 0;
        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) // check if key startwith 'Product_'
            {
                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).toFixed(2);
                productSubTotal = parseFloat(productQuantity * 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 outputTotal = "<table><tr><td><b>TOTAL:</b> EUR " + totalPrice + "</td></tr></table>";
                var TotalOutput = outputName + outputAlbum + outputQuantity + outputPrice + outputSubTotal + outputTotal;
                document.getElementById("Cart-Contents").innerHTML=TotalOutput;


            }
            }

            alert(TotalOutput);




    }

    window.onload = ShoppingCart;


</script>

函数ShoppingCart（）{
var totalPrice=0；
var输出；
var产品名称；
var productAlbum；
var产品数量；
var产品价格；
var productSubTotal=0；
var总价格；
for（var i=0；i
“；
var outputTotal=“总计：欧元”+总价+”；
var TotalOutput=outputName+outputAlbum+outputQuantity+outputPrice+outputSubTotal+outputTotal；
document.getElementById（“购物车内容”）.innerHTML=TotalOutput；
}
}
警报（总输出）；
}
window.onload=购物车；

正在输出的唯一项是localStorage中名为“PRODUCT_0”的项。其他的没有被显示

这是我在localStorage中拥有的功能：

---

知道为什么会发生这种情况吗？

代码中有错误。 如果产品0不在本地存储中，您会怎么想

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

可能为null并引发错误

试试这个：

for (var i = 0; i < localStorage.length-1; i++){
     var keyName = localStorage.key(i);
     if(keyName.indexOf('Product_')==0) // check if key startwith 'Product_'
     {
        var product = localStorage.getItem(keyName);
        //do your code here
     }
}

这是替换，不是附加

---

希望这有帮助

不，只显示一个项目！查看更新代码后的问题。

document.getElementById（“购物车内容”）.innerHTML=TotalOutput更改为：
document.getElementById（“购物车内容”）.innerHTML=document.getElementById（“购物车内容”）.innerHTML+TotalOutputdocument.getElementById("Cart-Contents").innerHTML=TotalOutput;