Как можно улучшить получение списка из локалстора?

Question

[Иван]

на данный момент, при нажатии на кнопку значение инпута добавляется в новый li, потом значение добавляется в локалстор. после чего при каждом обновлении страницы, если в массиве есть значения сохранённого инпута, браузер снова создаёт новый список и в него добавляет уже значения. можно ли доставать из локал стора сразу список чтобы не генерировать при каждом обновлении страницы новые списки?

Answer 1

[Иван]

const inputHobbies = document.querySelector(".page-info-wrap__hobbies-input");
const btnAddHobbies = document.querySelector(".page-info-wrap__add-hobbies");
const ul = document.querySelector(".page-info-wrap__hobbies-list");

let listValues = [];

if (localStorage.getItem("myHobbies")) {
    listValues = JSON.parse(localStorage.getItem("myHobbies"));
}
for (let i = 0; i <= listValues.length-1; i++) {
    let newLi = document.createElement('li');
    ul.appendChild(newLi);
    newLi.textContent = listValues[i];
}


btnAddHobbies.addEventListener("click", () => {
        let newLi = document.createElement('li');
        const input = inputHobbies.value;
        if (input) {
            // убрать манипулирование стилями
            newLi.textContent = input;
            ul.appendChild(newLi);
            // добавляю значения в массив, чтобы потом кинуть в локалстор
            listValues.push(newLi.textContent);
            inputHobbies.value = "";
            localStorage.setItem("myHobbies", JSON.stringify(listValues));
            if (listValues.length >= 5) {
                btnAddHobbies.setAttribute('disabled', 'disabled');
            }
        }
});

ul.addEventListener('click', function(event) {
    const target = event.target;
    if (target.tagName === "LI") {
        target.remove();
        listValues.pop(target);
        localStorage.setItem("myHobbies", JSON.stringify(listValues));
    }
});

Answer 2

[Rsa97]

Сохранять весь список как HTML.

Answer 3

[Absolute138]

Просто работа со строкой - конкатенация, удаление подстроки из строки и т.д.. Как-то так, наверное...

const inputHobbies = document.querySelector(".page-info-wrap__hobbies-input");
const btnAddHobbies = document.querySelector(".page-info-wrap__add-hobbies");
const ul = document.querySelector(".page-info-wrap__hobbies-list");

let listValues = '';
const keyLocalStorage = 'myHobbies2';

  if (localStorage.getItem(keyLocalStorage) !== null) {
        listValues = localStorage.getItem(keyLocalStorage);
   } else {
        localStorage.setItem(keyLocalStorage, '');
   }

ul.innerHTML = listValues;

btnAddHobbies.addEventListener("click", () => {
    let input = inputHobbies.value;
    if (input.length) {
        listValues += '<li>'+input.trim()+'</li>';
        localStorage.setItem(keyLocalStorage, listValues);
        ul.innerHTML = listValues;
    }
});

ul.addEventListener('click', function(event) {
    const target = event.target;
    if (target.tagName === "LI") {
      let str = '<li>'+target.textContent+'</li>';
      listValues = listValues.replace(str, '');
      localStorage.setItem(keyLocalStorage, listValues);
      ul.innerHTML = listValues;
    }
});