Попытка добавить элементы в localStorage, но застряла в бесконечном обновлении ада

Question

Так что я отлично смотрел видео онлайн-курса, когда на консоли появилось «books.push - не ошибка функции», и я просто не могу от него избавиться!Я даже скачал код автора, и он там тоже.Всякий раз, когда я пытаюсь добавить книгу, страница просто перезагружается и ничего не происходит, она даже не добавляется в LS.Кстати, другие методы пусты, потому что я остановился после того, как эта тихая кошмарная ошибка появилась.

Обновление: чтобы сделать вещи еще более странными, в CodePen все работает просто отлично, данные добавляются в localStorage, но при запускена живом сервере @ Firefox ошибка есть в любом случае.Это ошибка браузера?

Пожалуйста, проверьте ссылку ниже

https://codepen.io/mateusmlo/pen/JZKbar

    static addBook(book){
    const books = Store.getBooks();

    books.push(book);

    localStorage.setItem('books', JSON.stringify(books));
}

static removeBook(){

}

Обновление 2: хорошо, так что это действительно проблема браузераизвините, я не сказал, что это Firefox DEVELOPER Edition, на обычном Firefox этого не произошло.Но все дали мне некоторые драгоценные идеи, которые я действительно буду делать в будущем.Спасибо вам, ребята!

Answer 1

Я понял, что в книге вы не хотите вводить слишком много вещей сразу, и автор должен был сделать несколько ярлыков, но если ваш код ожидает, что что-то будет массивом, он должен на самом деле проверить (или иметьстатическая проверка типов), что это на самом деле массив.Метод getBooks должен быть переписан следующим образом:

static getBooks () {
  const stored = localStorage.getItem('books');
  let books = []; // default to empty array

  // need the try-catch here because the parse can fail
  try {
    const parsed = JSON.parse(stored);
    if (Array.isArray(parsed)) { // check that it's an array
      books = parsed;
    } // else leave books as default
  } catch (e) {
    // no-op, leave books as default
  }

  return books;
}

Теперь код будет

1. Всегда возвращать массив и ничего больше
2. Всегда успешно.Существует очень строгое соглашение, что метод получения никогда не должен генерировать, и в исходном методе анализ может завершиться неудачно.

Если вы занимаетесь бессмысленной микрооптимизацией, вы также можете добавить ранний возврат, чтобы пропустить try/catch, если stored равно null или undefined.

Оригинал почти наверняка дает сбой, потому что произошло нечто подобное:

localStorage.setItem('books', JSON.stringify({})); // NOTE: {} not []

Теперь, когда он найден:

if (localStorage.getItem('books') === null) { // this will be false, because it's not null

Потом позже

books.push(whatever); // oops! books is {} not []! No push method for you

Что объясняетпочему обновление не исправляет это, и почему один и тот же код прекрасно работает на другой странице (например, в коде).Если вы откроете консоль на этой странице и наберете localStorage.setItem('books', '[]'), вы можете внезапно увидеть, что ваша проблема исчезла.