Question

我创建了一个书签页面，用户可以在其中搜索，添加，删除和更新书签，但是我真的很难弄清楚如何保存这些书签。我做了很多研究，并在这里问了几次，但没有得到解决方案。所以基本上，用户添加到列表中的文本应该保存，因此刷新页面时该文本不会消失，现在我尝试保存包含所有childNodes的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仅存储字符串，没有其他内容。幸运的是，有一种方法可以将数组或对象转换为字符串，然后将该字符串解析回对象或数组：

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

Answer 2

您不能直接在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);

无法正确获取localStorage中存储的数据

2 个答案: