更新

Question

我试图获取并排序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>

正在输出的唯一项目是名为＆＃39; Proudct_0＆＃39;在localStorage中。其他人没有被展示！

这就是我在localStorage中所拥有的：http://i.imgur.com/sHxXLOL.png

知道为什么会这样吗？

Answer 1

代码中有问题。如果Product_0不在localStorage中，你怎么看？

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("Cart-Contents").innerHTML=TotalOutput;

它是替换，而不是追加

希望这有帮助！

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

1 个答案:

更新