从localStorage中检索对象在控制台日志中可以工作,但在页面上却不能。

问题描述 投票:-2回答:1

我刚刚开始学习localStorage API,我试图存储关联数组(Objects)并检索它。我正在使用 JSON.stringify 在存储和 JSON.parse 检索时。然而,当我使用 element.innerHTML 它显示 [object]['object] 虽说 console.log 很好用,(显示对象的所有数据)。我希望它能以这种格式显示。

Id: 1

姓名: 约翰

姓:无名氏

职务。律师

同上。2

姓名: Sally

姓:史蒂文斯

职务。首席执行官

    var msg_display = document.getElementById("msg_display");

    var employees = [
                 {
                  'id': 1,
                  'name':'John',
                  'surname':'Doe',
                  'position':'Lawyer'
                 },
                 {
                  'id': 2,
                  'name':'Sally',
                  'surname':'Stevens',
                  'position':'CEO'
                 },
                 {
                  'id': 3,
                  'name':'Martin',
                  'surname':'Gordons',
                  'position':'Accountant'
                 }
                ];



    localStorage.setItem("employees", JSON.stringify(employees));

    var employee_list = localStorage.getItem("employees");
    employee_list = JSON.parse(employee_list);

     for(var i = 0; i < employee_list.length; i++){
        console.log(employee_list[i]);

        msg_display.innerHTML = "id: " + employee_list[i] + "<br>";
        msg_display.innerHTML+= "name: " + employee_list[i] + "<br>";
        msg_display.innerHTML+= "surname: " + employee_list[i] + "<br>";
        msg_display.innerHTML+= "position: " + employee_list[i] + "<br>";

     }

我知道有一些库可以和localStorage一起工作,但我不想在了解没有它们的限制之前就开始使用它们。先谢谢你

javascript local-storage
1个回答
1
投票

你检索的是对象本身,而不是值。

for(var i = 0; i < employee_list.length; i++){
            console.log(employee_list[i]);

            msg_display.innerHTML = "id: " + employee_list[i].id + "<br>";
            msg_display.innerHTML+= "name: " + employee_list[i].name + "<br>";
            msg_display.innerHTML+= "surname: " + employee_list[i].surname + "<br>";
            msg_display.innerHTML+= "position: " + employee_list[i].position + "<br>";

         }
© www.soinside.com 2019 - 2024. All rights reserved.