将localStorage元素打印到html页面上

Question

基本上，我想捕获用户的购物篮，然后在单独的页面上打印此信息。 用户将能够在购物篮页面上单击一个按钮，将其带到新页面（这将具有类似结构的发票，显示其物品，成本等）。 目前，我在购物篮页面上运行了以下脚本。

jQuery( document ).ready(function($) {
    var itemName = document.getElementById('itemName');

    if(typeof(Storage)!=="undefined")
    {
        var me = {name: itemName.textContent};
        localStorage.setItem("user",JSON.stringify(me));
    }
    else
    {
        // Sorry! No Web Storage support..
    }    
});

哪个正在访问购物车页面上的以下html

<!--START: itemnamelink--><a id="itemName" href="product.asp?itemid=[ITEM_CATALOGID]">[ITEM_NAME]</a><!--END: itemnamelink--> 

在新页面上，我正在创建要在发票上显示信息的位置，例如时尚，我具有以下代码。

<script>
jQuery( document ).ready(function($) {

    console.log(localStorage.getItem("user"));

    var items = JSON.parse(localStorage.getItem("user"));

    for(var key in items){
    if(items.hasOwnProperty(key)){

   document.getElementById("add").innerHTML +=  "name:" + "<br>" + items[key];
    }
}

});
</script>



<div id="add">

</div>

但是我正在打印以下内容，这并不理想。 我最终希望再打印一些元素。 我认为我的问题是我正在打印整个本地存储，所以在我脑海中，它只是将它们全部转储在一行上，因此我需要遍历存储并分别打印每个元素。

  name:
  red chair black chair

Answer 1

function writeToLocalStorage(obj) {

        return localStorage.setItem("data", JSON.stringify(obj));
}

 function getFromLocalStorage() {

        return JSON.parse(localStorage.getItem("data"));
}
writeToLocalStorage({ id: "2", cart: "item" });
var data = getFromLocalStorage();
console.log(data.id);

然后使用data.name访问

Answer 2

您需要对从存储中获取的对象使用JSON.parse（） 。

 var json = '{"name":"black chair red chair"}'; obj = JSON.parse(json); document.getElementById('element').innerHTML = obj.name; 

 <div id='element'></div>