Javascript 如何循环浏览每个列表并在其中添加本地存储项

我有一个书签页面，可以添加、编辑和删除书签。我已经将这些项目存储在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);

---

考虑到列表是一个数组，您需要在其中循环并在该循环中创建adn填充元素。尝试以下方式编辑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等。

Hynkes -Xyx兄弟，这就是我正在寻找的。虽然我用了foreach，但它不起作用，我不知道为什么。不管怎么说，它又起作用了。我很高兴。快乐编码！