Сохранение текстовых записей в локальном хранилище в Javascript

Question

Я новичок в кодировании в Javascript, и я делаю ошибку при попытке завершить программу.Мой текущий код такой:

function addTextEntry(key, text, isNewEntry) {

    // Create a textarea element to edit the entry
    var textareaElement = document.createElement("TEXTAREA");
    textareaElement.rows = 5;
    textareaElement.placeholder = "(new entry)";

    // Set the text within the textarea
    textareaElement.innerText = text;

    // Add a section to the diary containing the textarea
    addSection(key, textareaElement);

    // If this is a new entry (added by the user clicking a button)
    // move the focus to the text area to encourage typing
    if (isNewEntry) {
      textareaElement.focus();
    }

    // TODO: Q1(c)(iii)
    // TODO: Add an event listener to textareaElement to save the text when 
 it changes
    textareaElement.addEventListener("change", function(event) {
      // TODO: Within the listener function...
      // TODO: ...make an item using the text area value
      item = makeItem(
      "text",
      textareaElement.value
    );
      // TODO: ...store the item in local storage using the given key
       localStorage.setItem(key, item);
       });
}

Как уже упоминалось в комментариях к кодированию, моя цель - создать и сохранить элемент в локальном хранилище, однако это не работает.Я знаю, что это очень вероятно, ошибка пользователя из-за неспособности понять, на какой «ключ» я должен ссылаться в строке (localStorage.setItem).Извиняюсь, если это глупая ошибка или нелогичная, я все еще учусь, поэтому я не могу понять, что я делаю неправильно.

Мой HTML-код выглядит следующим образом, и я могу добавить оставшуюся часть кода Javascript, еслинеобходимо:

Мой журнал Erehwon rw9438

<main>
  <section id="text" class="button">
    <button>Add entry</button>
  </section>
  <section id="image" class="button">
    <button>Add photo</button>
    <input type="file" accept="image/*">
  </section>
</main>

Answer 1

localStorage может хранить только строку в качестве значения. Вы пытаетесь установить значение как объект.

Вы можете просто сохранить текст из вашего texarea

localStorage.setItem(key, textareaElement.value)

Или, если вы действительно хотите сохранить объект, вы должны его преобразовать в строку

localStorage.setItem(key, JSON.stringify(item))

Не получить доступ к JSON.parse при извлечении «элемента» из localStorage

Answer 2

не важно, нет, это глупо:)

Значение ключа, к которому вы сейчас обращаетесь, это ключевой параметр функции: addTextEntry(key, text, isNewEntry). Наименование key не должно иметь большого значения, но для уверенности в том, что оно выделено, вы можете попробовать добавить оператор console.log(localStorage) чуть ниже вашего localStorage.setItem. Таким образом, вы можете проверить, что хранится в вашем объекте localStorage, и проверить ключ, в котором хранится ваше значение.

Вот пример из консоли браузера, где ключ это myKey:

Надеюсь, это поможет.