Question

我正在开发一个带本地存储的购物车，我声明了本地存储

var cart = {}; cart.products = []; localStorage.setItem('cart', JSON.stringify(cart));

使用来自数据阵列的AJAX添加产品，其中包含onclick()事件

的产品详细信息

var product = {};
    product.id = msg.produto.id;
    product.name = msg.produto.nome;
    product.price = msg.produto.preco;
    product.image = msg.produto.name;

    addToCart(product);

'addToCart'函数使用.push

将数组添加到本地存储对象

var cart = JSON.parse(localStorage.getItem('cart')); cart.products.push(product);

，我需要在javascript中执行for或$.each以获取所有产品详细信息，逐个添加到我的HTML中。

我试过这种方式：

localStorage.setItem('cart', JSON.stringify(cart));

var retrievedData = localStorage.getItem("cart");

$.each(retrievedData , function (i, item) {

 alert(item.nome);
 alert(item.product.nome);

});

但不起作用......

var retrievedData = localStorage.getItem("cart");对象结果

{"products":
    [
        {
        "id":"01",
        "name":"Product Name 01",
        "price":"Product Price 01",
        "image":"Product Imagem 01"
        },
        {
        "id":"02",
        "name":"Product Name 02",
        "price":"Product Price 02",
        "image":"Product Imagem 02"
        },
    ]
}

Answer 1

您期望的localStorage数据的结果是一个数组，它是＆＃34; products＆＃34;的值。返回对象的属性。

出于这个原因，我会尝试：

$.each(retrievedData.products , function (i, item) {
  ...
});

Answer 2

var retrievedData = localStorage.getItem("cart");

retrievedData将是包含JSON的字符串。您必须首先使用JSON.parse解析它以获取对象。

然后，您可以按照Access / process (nested) objects, arrays or JSON中提到的技术遍历数据结构。

Answer 3

您可以使用https://github.com/godban/local-storage-parser等实用程序来简化与本地存储的交互

在javascript中循环本地存储对象

3 个答案: