为什么这段代码给了我“未捕获的类型错误：无法读取 null 的属性（读取 'push'）”错误？

Question

In this code I am getting error as Uncaught TypeError: Cannot read properties of null (reading 'push')

console.log("HI");
let addbtn = document.getElementById("addbtn");
addbtn.addEventListener("click", function (e) {
  let addtxt = document.getElementById("addtxt");
  let notes = localStorage.getItem("notes");
  if (notes == null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }

  notesObj.push(addtxt.value);
  //getting error at this point. Don't know why
  localStorage.setItem("notes", JSON.stringify(notesObj));
  addtxt = "";
  console.log(notesObj);
});

Answer 1

checkout this I hope it will fix your problem

let addbtn = document.getElementById("addbtn");
console.log('addbtn ', addbtn);

addbtn?.addEventListener("click", function (e) {
  let addtxt = document.getElementById("addtxt");
  let notes = localStorage.getItem("notes");

  notesObj = JSON.parse(notes ?? '[]');

  console.log('addtxt.value ', addtxt?.value);

  notesObj.push(addtxt.value);
  //getting error at this point. Don't know why
  localStorage.setItem("notes", JSON.stringify(notesObj));
  addtxt = "";
  console.log(notesObj);
});

Answer 2

The issue is that you have the string 'null' in your local storage.

Yes you compare with null , but notes is still JSON at this point, and apparently it can be null encoded as JSON. So you'd also need to check for 'null' as string.

Or, easier: Replace the whole if with something like this:

const notesObj = (notes && JSON.parse(notes)) ?? []

If you want to be also resilient against invalid JSON in local storage, you can use this:

let notesObj
try {
  notesObj = JSON.stringify(notes) ?? []
} catch(e) {} 

Answer 3

to fix this issue use localstorage.clear() in the console. that's it.