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

Question

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

这是我正在使用的代码(目前我只是有一个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);
}

<button onclick="A()">A()</button>
<button onclick="B()">B()</button>
<button onclick="addLi()">addLi()</button>
<div id="listCover">
<ul id="list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>

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