Сохранение массивов и объектов

localStorage хранит только текст. Если передать в setItem() что-то другое, он сам превратит это в текст, и не всегда так, чтобы с результатом можно было работать:

localStorage.setItem("books", ["Момо", "Матильда"]);
console.log(localStorage.getItem("books"));

localStorage.setItem("book", { title: "Момо" });
console.log(localStorage.getItem("book"));

Момо,Матильда
[object Object]

Массив превратился в текст Момо,Матильда, который больше не массив, а объект потерялся совсем. Выход вы уже знаете: JSON. Когда вы сохраняете значение, превращайте его в текст JSON через JSON.stringify(), а когда читаете — обратно в массив или объект через JSON.parse():

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

const saved = localStorage.getItem("books");
if (saved !== null) {
    books = JSON.parse(saved);
}

Когда страница открывается, она начинает с пустого массива (let books = [];) и заменяет его сохранённым, если он есть. Проверка на null здесь важна: JSON.parse(null) возвращает null, и первый же books.push() завершится ошибкой TypeError: Cannot read properties of null (reading 'push').

А когда странице нужно сохранять? Каждый раз, когда массив меняется: после добавления, удаления или изменения элемента. Проще всего написать функцию saveBooks() и вызывать её сразу после каждого изменения, рядом с вызовом, который снова показывает список.

Типичные ошибки:

• Сохранение без JSON.stringify(). Кажется, что всё работает, но когда страница откроется снова, JSON.parse("Момо,Матильда") завершится ошибкой SyntaxError.
• Сохранение в начале скрипта, до чтения сохранённых данных. Это затирает сохранённое пустым массивом.