Question

我有一个无序列表，可以在其中附加li元素。我想知道如何将列表转换为可以通过本地存储进行存储和重新制作的内容？我相信这需要将列表转换为数组，然后将其附加回ul ...

这是我正在使用的代码（当前我只有Symbol.iterator，因为我对如何附加存储的数据不知所措）。

alert()

function A() {
  var list = document.getElementById("list").innerHTML;
  localStorage.setItem("list", JSON.stringify(list));
}

function B() {
  var saved = JSON.parse(localStorage.getItem("list"));
  alert(saved);
}

function addLi() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Addition to list."));
  ul.appendChild(li);
}

Answer 1

使用.innerHTML做的事情应该可以正常工作。由于这是一个字符串，因此不需要JSON.stringify和JSON.parse。

或者，您可以遍历li元素并将其内容添加到数组中，然后存储该数组（使用JSON.stringify和JSON.parse，因为Web存储仅存储字符串）。

后一种选择看起来像这样：

var items = document.querySelectorAll("#list li");
var array = Array.prototype.map.call(items, function(item) {
    return item.textContent;
});
localStorage.setItem("list", JSON.stringify(array));

和

var saved = JSON.parse(localStorage.getItem("list")) || [];
saved.forEach(addLi);

...如果我们修改addLi以接受要添加的文本：

function addLi(text) {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(text));
    ul.appendChild(li);
}

将无序列表转换为数组以保存到本地存储

1 个答案: