Метод SetItem в JS

Question

Недавно я собирал todolist с javascript, используя localalstorage. Идея была проста - хранить списки в локальном хранилище, используя номер в качестве ключа и список элементов в качестве значения. Когда я попытался сохранить listItem, ключ был в порядке, но значение было таким же, как ключ, это был номер. Только когда я добавил строку «список» к значению ключа, все стало работать нормально. Итак, вопрос в том, почему это произошло? Почему ?

Вот пример кода:

НЕ РАБОТАЕТ (ЗНАЧЕНИЕ ВХОДА БЫЛО ЧИСЛО РАВНЫМ КЛЮЧУ):

let key = Object.keys(localStorage);
key.length === 0 ? key = 1 : key = key.length + 1;

btn.addEventListener("click", () => {
    const inputValue = document.querySelector(".textarea").value;
    localStorage.setItem(key, inputValue);
    location.reload();
});

РАБОТАЛ:

let key = Object.keys(localStorage);
key.length === 0 ? key = "list1" : key = "list" + (key.length + 1);

btn.addEventListener("click", () => {
    const inputValue = document.querySelector(".textarea").value;
    localStorage.setItem(key, inputValue);
    location.reload();
});

PS Прошу прощения за моего бедного Энгли sh.

Answer 1

Простой ответ, ключевым параметром localStorage.SetItem должна быть строка .

Первое решение можно использовать, если заменить строку 6 на:

localStorage.setItem(key.toString(), inputValue);

Кроме того, я предлагаю вам не изменять свои переменные в частях вашего троичного выражения. Вы должны заменить строку 1 на:

key = key.length === 0 ? 1 : key.length + 1;

Но на самом деле вам даже не нужен троичный, вы можете заменить его на

key = key.length + 1;

Еще одно предложение, вы должны оценить "ключ «внутри события. Таким образом, весь код будет выглядеть так:

btn.addEventListener("click", () => {
    const key = Object.keys(localStorage).length
    const inputValue = document.querySelector(".textarea").value;
    localStorage.setItem(key, inputValue);
    location.reload();
});