環本地存儲對象的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簡化與本地存儲