I made a Bookmark page where the user can search, add, delete and update Bookmarks, but I'm really having a hard time to figure out how to save those Bookmarks. I researched a lot and asked several times here but I didn't get the solution. so basically the text that user add in the list it should be saved so when the page is refreshed the text doesn't disappear now I tried to save the li tag which has all the childNodes in it but it doesn't save it and I found that you can't store DOM element. so, in the end, I just figure out a way with this below code it stores and load the data when I refresh the page. but it; not working properly and the delete and edit button is not working. this took three days to find the solution and still stuck on it. am gonna post all the code so you guys can see the error. and it would really be appreciated if anybody can help, and Thanx for your time.

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

```

```css
.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;
}

```

```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>

```