如何遍历每个列表并在其中添加本地存储项目

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);
  }
}

由于安全原因（访问本地存储），它不能像Stack Overflow沙箱中的代码sn-p一样运行，所以如果你想测试它，可以考虑复制到JSFiddle左右。