как перебрать каждый список и добавить в него локальный сохраненный элемент

Question

У меня есть страница закладок, где я могу добавлять и редактировать закладки.и я сохранил эти предметы в localStorage.проблема заключается в функции loaddata, где я получаю сохраненные данные и сохраняю их во вновь созданном файле li.тег li хранит все введенные мной данные только в одном списке. я хочу, чтобы каждая закладка была в своем собственном списке, как функция additem.но я не знаю, как этого добиться

const search = document.querySelector('form input');
const input = document.querySelector('.add-text');
const container = document.querySelector('ul');
let items = null;
let currentItem = null;
let array = [];

const searchItems = function(e) {
  if (items) {
    let word = e.target.value.toLowerCase();
    for (let item of items) {
      if (item.firstChild.textContent.toLowerCase().indexOf(word) !== -1) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    }
  }
}

const deleteItem = function(e) {
  currentItem = null;
  e.target.parentNode.remove();
  input.value = '';
}

const editItem = function(e) {
  currentItem = e.target.parentNode.firstChild;
  input.value = currentItem.textContent;
}

const updateItem = function(e) {
  if (currentItem) {
    currentItem.textContent = input.value;
    input.value = '';
  }else{
    alert('No Selected Text Here to Update');
    return;
  }
}

const addItem = function() {
  let val = input.value;
  if (val) {
    let li = document.createElement('li');
    let inner = '<h1 class="text">' + val + '</h1>';
    inner += '<button class="delete">Delete</button>';
    inner += '<button class="edit">Edit</button>';
    array.push(inner);
    let stringified = JSON.stringify(array);
    localStorage.setItem('list', stringified);
    li.innerHTML = inner;
    container.appendChild(li);
    input.value = '';
    currentItem = li.firstChild;  
    items = document.querySelectorAll('li');
    for (let del of document.querySelectorAll('.delete')) {
      del.addEventListener('click', deleteItem);
    }
    for (let edit of document.querySelectorAll('.edit')) {
      edit.addEventListener('click', editItem);
    }
  } else {
      alert('please add some text');
    return;
  }

}


function loaddata(){
    let li = document.createElement('li');
    let stringified = localStorage.getItem('list');
    let listitems = JSON.parse(stringified);
    li.innerHTML = listitems;
    container.appendChild(li);
    console.log(li);
}

loaddata();

search.addEventListener('keyup', searchItems);
document.querySelector('#add').addEventListener('click', addItem);
document.querySelector('#update').addEventListener('click', updateItem);

Answer 1

Учитывая, что ваш список является массивом, вам нужно пройтись по нему и создать дополнительные элементы внутри этого цикла.Попробуйте отредактировать вашу loaddata функцию следующим образом:

// Mock content

let container = document.body
localStorage.setItem('list', JSON.stringify(['<h1>Foo</h1>', '<h1>Bar</h1>',     '<h1>Baz</h1>']))
loaddata()

// Edited 'loaddata'

function loaddata() {
  let stringified = localStorage.getItem('list');
  console.log(stringified)
  let listitems = JSON.parse(stringified);
  for (let i = 0; i < listitems.length; i++) {
    let li = document.createElement('li');
    li.innerHTML = listitems[i];
    container.appendChild(li);
    console.log(li);
  }
}

Она не может быть запущена как фрагмент кода в изолированной программной среде переполнения стека по соображениям безопасности (доступ к локальному хранилищу), поэтому если вы хотите проверитьрассмотрите возможность копирования в JSFiddle или около того.