javascript - 页面上显示未定义的值，但 localStorage 仍然存在？

Question

我提前道歉，我是一般的新编码（特别是对 localStorage），但我已经尝试了我遇到的所有东西——就我能理解的主题而言。

我正在使用 localStorage 和 JSON 来解析数据，我认为我已经让它“工作”了。但是，在刷新/重新加载时，我显示的值变得未定义。我有一个使用 push 函数添加名称和递增 id 的数组。因此，假设我添加了“a”、“b”、“c”——将其控制台出来，我得到了这个（存储在这里：（localStorage.setItem("reminder")显然getItem是为了获取它））：

"[{"id":0,"name":"a"},{"id":1,"name":"b"},{"id":2,"name":"c"}]"

我知道这是一个字符串，所以我解析它（像这样JSON.parse(localStorage.getItem("reminder"))：）并将其注销以检查 -

0: {id: 0, name: "a"}
1: {id: 1, name: "b"}
2: {id: 2, name: "c"}
length: 3
__proto__: Array(0)

然后在我的页面上，列表看起来像：

<ul id="list">
<li> a <span id="0"></span></li>
<li> b <span id="1"></span></li>
<li> c <span id="2"></span></li>
</ul>

这是完美的。直到刷新，然后变成：

<ul id="list">
<li> undefined <span id="3"></span></li>
<li> undefined <span id="3"></span></li>
<li> undefined <span id="3"></span></li>
</ul>

事实上，这并不完美。但我仍然可以在控制台中记录字符串/数组并获取值。我仍然可以进入 Application -> localStorage 并查看我的密钥（“提醒”）仍然存在，并且值（如前面所述的字符串中所示）也仍然存在。忽略 id 是 list.length，我知道我需要找到一种方法来增加 id 而不仅仅是总长度——现在我对我未定义的情况更加好奇。

这是整个代码块，最上面的是 localStorage 焦点。

/* VARIABLES */
var input;
var list;
var id;

/**********************************************************************
****************************** LOCAL **********************************
***********************************************************************/
//set  data
const reminderList = localStorage.getItem("reminder");

/* CHECKING */
if (!reminderList) {
    list = [];
    id = 0;
} else {
    list = JSON.parse(reminderList);
    id = list.length; //find way to iterate through id property
    readList(list);
}

/* LOAD DATA */
function readList(reminders){
    reminders.forEach(function(item){
        addReminder(item.name, item.id);
    });
};

/* EMPTY ALL */
document.getElementById("clearAll").addEventListener("click", function(){
    localStorage.clear();
    location.reload();
});

/**********************************************************************
***************************** FUNCTIONS *******************************
***********************************************************************/

/************************ PUSH TO ARRAY ************************/ 
function addReminder() {
    let content = `<li> ${input} <span id=${id} onclick="removeItem()"><i class="fa fa-trash-o de" id="trash"></i></span> </li>`;

    //add to displayList div
    document.getElementById("displayList").insertAdjacentHTML("beforeend", content);
};

    //click function
function addonClick() {
    input = document.getElementById('input').value;

    if (input === "") {
        alert("We can't remind you of nothing! Please try again.");
    } else {
    addReminder(name, id);

    //add to array
    list.push({
        id: id,
        name: input
    });

    //add to local data
    localStorage.setItem("reminder", JSON.stringify(list));
    console.log(JSON.parse(localStorage.getItem("reminder"))); //checking to see if info is stored correctly(it is)

    id++;

    //reset input box
    document.getElementById('input').value="";
}};

标签： javascriptjson