Сохранить пользовательский ввод в localStorage

Question

Здравствуйте, я пытаюсь понять, как работает локальное хранилище. Я пытаюсь взять вход пользователя и добавить его в локальное хранилище. Я не уверен, какой параметр я передаю неправильно. Вот мой код:

const myForm = document.getElementById("todo");
const list = document.querySelector(".list-items");
myForm.addEventListener("submit", addTodo);

function addTodo(e) {
  e.preventDefault();
  const userInput = document.querySelector(".userAdd").value;
  const userListItem = document.createElement("li");
  userListItem.appendChild(document.createTextNode(userInput));
  list.appendChild(userListItem);
  localStorage.setItem('userListItem', userInput);
}

<form id="todo">
  <input class="userAdd" type="text">
  <input  type="submit">
</form>
<ul class="list-items"></ul>

Answer 1

Чтобы сохранить list items в localStorage, вам нужно сохранить их в array. Я изменил ваш код соответственно. https://codepen.io/dasseya1/pen/qMXQmK

const myForm = document.getElementById("todo");
const list = document.querySelector(".list-items");
myForm.addEventListener("submit", addTodo);

function addTodo(e) {
  e.preventDefault();
  const userInput = document.querySelector(".userAdd").value;
  const userListItem = document.createElement("li");
  userListItem.appendChild(document.createTextNode(userInput));
  list.appendChild(userListItem);
  const myArray = map(listItems, getText);
  localStorage.setItem('userListItem', JSON.stringify(myArray));
}

const listItems = document.getElementsByTagName('li');


function map(arrayLike, fn) {
    var ret = [], i = -1, len = arrayLike.length;
    while (++i < len) ret[i] = fn(arrayLike[i]);
    return ret;
}

function getText(node) {
    if (node.nodeType === 3) return node.data;
    var txt = '';
    if (node = node.firstChild) do {
        txt += getText(node);
    } while (node = node.nextSibling);
    return txt;
}

<form id="todo">
  <input class="userAdd" type="text">
  <input  type="submit">
</form>
<ul class="list-items"></ul>

Answer 2

Это прекрасно работает. Когда я обновляю свою страницу, она все еще там. Проверьте это, например, в Chrome console ... Кроме того, если этот код исчезает после обновления страницы, я советую проверить браузеры Privacy settings Надеюсь, это поможет.

Представьте, что это ваши пользовательские данные:

let userInput = ['one', 'two', 'three'];

// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store - [ we would pass it like this, using -> JSON.stringify ]
    localStorage.setItem("userListItems", JSON.stringify(userInput)); 
} else {
    console.warn("Sorry, your browser does not support Web Storage...");
}

// Retrieve - and when we want to get the item we would use JSON.parse to give us back an array
console.log(JSON.parse(localStorage.getItem("userListItems")));

Sidenote: Если вы используете Chrome (что, я надеюсь, вы делаете), вы можете нажать CTRL + SHIFT + I перейти к вам 'Application' вкладку и в разделе 'Storage' нажмите 'Local Storage' ... вы найдете там свои данные и еще больше изучите их.

ОБНОВЛЕНИЕ: Я обновил свой ответ до гораздо лучшей версии благодаря @ Kaiido
localStorage хранит только строки. Так что в моем предыдущем ответе это было бы приведено к "one, two, three", но теперь вы на самом деле получаете array обратно.