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()用于从存储中获取的对象。

＆＃13;

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

＆＃13;

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

＆＃13;

将localStorage元素打印到html页面

2 个答案: