Как сохранить список в localStorage

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

Вы должны сохранять значение полей формы, а не сами элементы DOM, как прокомментировали и другие.Однако вы можете сделать что-то подобное, если вам нужно для хранения элементов DOM.

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

Позже вам придется заново создать элемент DOMиспользуя что-то вроде этого:

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

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

Answer 2

Я взял ваш код и реструктурировал его для решения, которое вы можете завершить.Пожалуйста, прочитайте мои комментарии к коду для объяснения того, что я сделал.

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

Fiddle: http://jsfiddle.net/6mrbaL2n/