не удается правильно получить сохраненные данные в localStorage

Question

Я создал страницу Закладок, где пользователь может искать, добавлять, удалять и обновлять Закладки, но мне действительно трудно понять, как сохранить эти Закладки.Я много исследовал и просил несколько раз здесь, но я не получил решение.так что в основном текст, который пользователь добавляет в список, он должен быть сохранен, чтобы при обновлении страницы текст не исчезал, теперь я попытался сохранить тег li, в котором есть все дочерние узлы, но он не сохраняется, и яобнаружил, что вы не можете хранить элемент DOM.так что, в конце, я просто придумаю способ с помощью приведенного ниже кода, который он сохраняет и загружает данные при обновлении страницы.но это;не работает должным образом и кнопка удаления и редактирования не работает.Потребовалось три дня, чтобы найти решение, и все еще зависло.Я опубликую весь код, чтобы вы, ребята, могли увидеть ошибку.и будет очень признателен, если кто-нибудь может помочь, и спасибо за ваше время.

JAVASCRIPT

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);
    console.log(localStorage)
    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 stringified = localStorage.getItem('list');
  let listitems = JSON.parse(stringified);
  let li = document.createElement('li');
  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);

.main {
  position: relative;
  margin: 0 auto;
  width: 500px;
  height: 600px;
  padding-top: 50px;
  background: #f1efef;
}

h2 {
  position: absolute;
  top: 0;
  left: 18%;
  color: navy;
}

form {
  position: relative;
  width: 80%;
  height: 5vh;
  left: 10%;
  margin-top: 20px;
}

input {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 19px;
}

ul {
  position: relative;
  width: 80%;
  left: 10%;
  height: 350px;
  border: 1px solid #e1dfdf;
  padding: 0;
  margin-top: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
  box-sizing: content-box;
  list-style: none;
}

li {
  position: relative;
  width: 100%;
  height: 6vh;
  margin-bottom: 20px;
  background: #eaeaea;
  border-left: 2px solid blue;
  box-sizing: border-box;
  color: white;
}

li h1 {
  position: relative;
  font-size: 20px;
  color: navy;
  float: left;
  width: 60%;
  height: 5vh;
  top: -5px;
  margin-left: 10px;
  left: 0;
}

li button {
  position: relative;
  outline: none;
  border: none;
  font-size: 15px;
  padding: 0 6px;
  top: 1vh;
  height: 4vh;
  background: blue;
  float: right;
  margin: 0 5px;
  color: white;
  cursor: pointer;
  display: block;
}

div div {
  position: absolute;
  bottom: 60px;
  width: 100%;
  height: auto;
}

div div input {
  position: relative;
  left: 10%;
  width: 80%;
  height: 5vh;
  margin-bottom: 20px;
  display: block;
}

div div button {
  position: relative;
  left: 8%;
  width: 40%;
  height: 5vh;
  margin: 0 5px;
  outline: none;
  border: none;
  display: inline-block;
  background: blue;
  color: white;
  cursor: pointer;
}

<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

Вы не можете хранить массив непосредственно в localStorage, вам нужно преобразовать ваш массив в строку, так как localStorage хранит только строковые значения.

JSON.stringify(your data ) для строкового преобразования и JSON.parse(your data from local storage) для разрыхления.

var myArray = [1,2,3,4,5]
console.log('myArray: ', myArray);
localStorage.setItem('myArray', JSON.stringify(myArray))

var myArrayFromLocalStorage = JSON.parse(localStorage.getItem('myArray'));
console.log('myArrayFromLocalStorage: ', myArrayFromLocalStorage);

Answer 2

LocalStorage хранит только строки, ничего больше.К счастью, есть способ преобразовать массив или объект в строку, а затем проанализировать эту строку обратно в объект или массив:

let stringified = JSON.stringify(array); // Converts the array to a string
localStorage.setItem('list', stringified );

, а затем в loaddata ():

let stringified = localStorage.getItem('list');
let listitems = JSON.parse(stringified); // Converts back to an array