Преобразовать неупорядоченный список в массив для сохранения в localalstorage - PullRequest
Новая
       7

Преобразовать неупорядоченный список в массив для сохранения в localalstorage

0 голосов
/ 28 июня 2018

У меня есть неупорядоченный список, к которому я могу добавить элементы li. Я хочу знать, как преобразовать список в то, что может быть сохранено и переделано через localalstorage? Я считаю, что это влечет за собой преобразование списка в массив, а затем добавление его обратно в 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>

1 Ответ

0 голосов
/ 28 июня 2018

То, что вы делаете, используя .innerHTML, должно работать нормально. Поскольку это строка, нет необходимости в JSON.stringify и JSON.parse.

Кроме того, вы можете перебрать элементы li и добавить их содержимое в массив, а затем сохранить массив (с JSON.stringify и JSON.parse, поскольку в веб-хранилище хранятся только строки).

Последний вариант выглядит примерно так: 

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