为什么“添加注释”按钮会出现异常并在控制台上打印 null？答案

【问题标题】：Why is the "Add Note" button giving an exception and printing null on the console?为什么“添加注释”按钮会出现异常并在控制台上打印 null？
【发布时间】：2021-07-28 12:25:04
【问题描述】：

我正在尝试使用“添加注释”按钮添加注释，但它抛出了 exception。我使用 try...catch 块处理了错误，但未添加添加注释按钮中写入的注释并在控制台上打印null。 JSBin 我的项目：

【问题讨论】：

查看如何创建minimal reproducible example。

标签： html forms button

【解决方案1】：

这件作品：

if(notes =='')
{
    notesObj = [];
}
else{
    notesObj = JSON.parse(notes);
}

是问题所在。如果本地存储中没有任何内容，则notes 将为空，这意味着notesObj == '' 将为假，代码将中断。您需要更改测试，以便它检测 null（和其他虚假值）：

if(!notes)
{
    notesObj = [];
}
else{
    notesObj = JSON.parse(notes);
}

还有一个问题。这一行：

localStorage.setItem('notes', JSON.stringify(notes));

没有意义。您将本地存储中的项目注释设置为 notes 变量的转换后的 json，这已经是一个 JSON 字符串，所以它会严重失败。您真正想要做的是字符串化notesObj 变量，它是带有实际注释的数组。将该行更改为：

localStorage.setItem('notes', JSON.stringify(notesObj));

就是这样。进行这些更改，您的代码就可以工作了。

【讨论】：