Question

我用html和javascript创建了一个购物清单程序。我是初学者，不知道如何实现localstorage来存储列表项。我正在插入程序的完整代码，以更好地解释我想要存储在本地存储中的内容。它包含一个用于输入项目名称的输入字段和一个按钮，该按钮在单击时将输入的文本设置为列表项目。列表项然后有两个图像，一个用于标记它完成，另一个用于从列表中删除项目。因此，购物清单中的每个列表项都包含两个子图像节点。不知道如何为本地存储做这个。请帮忙

var input = document.getElementById('input');
var add = document.getElementById('add');
var list = document.getElementById('list');
var bottom = document.getElementById('bottom');

add.onclick = ShoppingList;

function ShoppingList(){
  var li = document.createElement('li');
  var imageDone = document.createElement('img');
  var imageRemove = document.createElement('img');
  
  imageDone.setAttribute('src', 'https://cdn0.iconfinder.com/data/icons/round-ui-icons/512/tick_green.png');
  
  imageRemove.setAttribute('src', 'http://findicons.com/files/icons/1580/devine_icons_part_2/128/trash_recyclebin_empty_closed.png');
  
  li.textContent = input.value;
  li.appendChild(imageRemove);
  li.appendChild(imageDone);
  bottom.appendChild(li);
  input.value = "";
  input.focus();
  imageDone.onclick = function(){
    li.removeChild(imageRemove);
  };
  imageRemove.onclick = function(){
    bottom.removeChild(li);
  };
  
  li.ondblclick = function(){
    bottom.removeChild(li);
  };
}

.container {
  width: 400px;
  margin: 50px auto; 
  text-align: center;
  font-family: verdana;
}

#top, #bottom {
  width: 300px;
  margin: 20px auto;
 
}

#input {
  width: 220px;
  padding: 5px 0;
  font-size: 16px;
  outline: none;
  border: 0;
  border-bottom: 3px solid #84ac47;

}

#add {
  width: 73px;
  padding: 9px;
  margin:0
  outline: none;
  background: #67c100;
  color: #fff;
  border: 0;
}

li {
  list-style-type: none;
  float: left;
  line-height:36px;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 300;
  text-align: left;
  width: 300px;
  margin-left:0;
  padding-left:0;
  border-bottom: 2px solid #eeeeee;
  color: #67c100;
 
  
}

img {
  float: right;
  height: 35px;
  width: 35px;
  padding-left: 10px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="shoppinglist.css">
  <title>Shopping List</title>
</head>
<body>
<div class="container">
  <h2>Shopping List</h2>
  <div id='top'><!--
  --><input type="text" id="input"><!--
  --><button id="add">ADD</button>
  </div>
  
  <div id='bottom'>
  <ul id="list"></ul>
  </div>
</div>
<script src="shoppinglist.js"></script>
</body>
</html>

Answer 1

试试这个：

var items = [];
var index = 0;

function createListItem(text, done, dontStore) {
  var li = document.createElement('li');
  var imageRemove = document.createElement('img');

  imageRemove.setAttribute('src', 'http://findicons.com/files/icons/1580/devine_icons_part_2/128/trash_recyclebin_empty_closed.png');

  li.textContent = text;
  var i = index;
  if (!dontStore) {
    items[index++] = {text: text, done: false};
    localStorage.setItem('items', JSON.stringify(items));
  }
  li.appendChild(imageRemove);
  if (!done) {
    var imageDone = document.createElement('img');
    imageDone.setAttribute('src', 'https://cdn0.iconfinder.com/data/icons/round-ui-icons/512/tick_green.png');
    li.appendChild(imageDone);
    imageDone.onclick = function(){
      li.removeChild(imageRemove);
      items[i].done = true;
      localStorage.setItem('items', JSON.stringify(items));
    };
  }
  bottom.appendChild(li);

  function remove() {
    bottom.removeChild(li);
    delete items[i];
    localStorage.setItem('items', JSON.stringify(items));
  }
  imageRemove.onclick = remove;

  li.ondblclick = remove;
}

function ShoppingList() {
  createListItem(input.value);
  input.value = "";
  input.focus();
}


items = JSON.parse(localStorage.getItem('items') || '[]');
items.forEach(function(item) {
  if (item) {
    createListItem(item.text, item.done, true);
  }
});

如何使用javascript在localstorage中存储带有文本和图像的li

1 个答案: