环本地存储对象的JavaScript

Question

我正在开发具有本地存储的购物车，我宣布本地存储

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

，并从产品的细节数据阵列上的onclick()添加具有AJAX产品事件

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);

比，我需要做一个for或$.each在JavaScript中得到的所有产品的细节，一个接一个，并添加到我的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");对象导致LIK

{"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

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

retrievedData将是一个串含JSON。你必须先解析它才能得到一个对象，使用JSON.parse。

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

Answer 2

导致localStorage数据你期望的是数组，它是返回对象的“products”属性的值。

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

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

Answer 3

您可以使用工具像https://github.com/godban/local-storage-parser简化与本地存储