Question

我创建了一个CRUD页面，并在用户输入文本时在输入中创建了文本，该文本被添加到列表中。现在我想将该列表保存在localStorage中，并尝试将其存储，但是控制台日志中出现了一个空对象。任何帮助将不胜感激。

JAVASCRIPT

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>';
    li.innerHTML = inner;
    container.appendChild(li);
    input.value = '';
    currentItem = li.firstChild;  
    //i want to save the below list
    items = document.querySelectorAll('li');
    for(let item of items){
      //this return empty object
      localStorage.setItem('list', JSON.stringify(item) );
      console.log(localStorage)
    }
    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;
  }
}

HTML（如果需要）

<div class="main">
  <h2>JavaScript CRUD Bookmark</h2>
  <form>
    <input type="text" placeholder="search">
  </form>
  <ul></ul>
  <div>
    <input class="add-text" type="text" placeholder="Add Text">
    <button id="add">Add</button>
    <button id="update">update</button>
  </div>
</div>

Answer 1

我已经采用了您的代码并将其重组为可以完成的解决方案。请阅读我的代码注释，以解释我的工作。

// HTML is almost the same as yours. I added a class name to the <ul>

// Generates a unique string of characters suitable for a key
function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

const list = document.querySelector('.current-list'); // the <ul>

const addItem = function() {
  // Get the input value

  let input = document.querySelector('.add-text');
  let val = input.value;

  if (val) {
     // 1. Create unique key
     let uniqueKey = guid();

     // 2. Append item to the list, visually. Note the contentEditable
     //    attribute. We can now click directly into the list item contents
     //    and change it. We can then update the storage when leaving the input.
     list.innerHTML += `\n<li data-key="${uniqueKey}" contentEditable>${val}</li>`;

     // 3. Set the storage key
     localStorage.setItem(uniqueKey, JSON.stringify(val));
  } else {
      alert('please add some text');
    return;
  }
}

// TODO: Add update item function

// TODO: Add delete item function

document
  .querySelector('#add')
  .addEventListener('click', addItem);

提琴：http://jsfiddle.net/6mrbaL2n/

Answer 2

您应该保存表单字段的值，而不是其他元素也已评论的DOM元素本身。但是，如果需要存储DOM元素，您可以做类似的事情。

localStorage.setItem('list', JSON.stringify(item.outerHTML))

稍后，您必须使用以下方法重新创建DOM元素：

let div = document.createElement('div');
div.innerHTML = JSON.parse(localStorage.getItem('list'))

此外，items的for循环每次都会覆盖localStorage项目值。如果要在localStorage中创建唯一项，请考虑向项目密钥添加唯一标识符。

如何在本地存储中存储列表

2 个答案: