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

【问题标题】：How to store li with text and images in localstorage with javascript如何使用javascript将带有文本和图像的li存储在localstorage中
【发布时间】：2016-02-04 16:57:21
【问题描述】：

我用 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>

【问题讨论】：

标签： javascript css html local-storage

【解决方案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);
  }
});

【讨论】：

感谢您的回复。你能解释一下上面的代码发生了什么吗？
@knight 代码将购物清单保存在 items 数组中，并将该数组保存在 localStorage 中，该数组需要首先被字符串化并在加载时从 localStorage 加载数组并解析字符串，然后它遍历数组并重新创建购物清单。
谢谢，但我看不到任何添加按钮单击事件。您能否分享工作中的 jsfiddle，以便我可以更好地了解真正使事情发生的原因。再次感谢您的帮助
@knight 其余代码相同，这里是jsfiddle jsfiddle.net/tz999Leq
感谢 jc ubic 它确实有帮助，我感谢您的努力。再次感谢