Как сохранить данные с помощью localStorage

Question

Я делаю список задач, и пока он сохраняет данные в todotask строке и completed. вид изнутри https://jsfiddle.net/6rqfd103/

Я пытался сохранить его как массив, я сохранил его, но не смог вытащить его наружу, и это код, когда я ничего не сделал, покажи мне, какЯ пока не понимаю это место. объясни мне. большое спасибо

var newTaskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var todoTask = document.getElementById("incomplete-tasks");
var completeTask= document.getElementById("completed-tasks");

var createNewTaskElement = function(taskString) {
  var listItem = document.createElement("li");
  var checkBox = document.createElement("input");
  var label = document.createElement("label");
  var editInput = document.createElement("input");
  var editButton = document.createElement("button");
    var deleteButton = document.createElement("button");

  checkBox.type = "checkbox";
  editInput.type = "text";
  editButton.innerText = "Edit";
  editButton.className = "edit";
  deleteButton.innerText = "Delete";
  deleteButton.className = "delete";

  label.innerText = taskString;

  listItem.appendChild(checkBox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

  return listItem;
}

var addTask = function() {
    if(newTaskInput.value == ""){
        alert("Nhap todoTask Item !");
        return false;
    }
  var listItem = createNewTaskElement(newTaskInput.value);
  todoTask.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);

    newTaskInput.value = "";
    return true;
}

var editTask = function() {
  var listItem = this.parentNode;
  var editInput = listItem.querySelector("input[type=text");
  var label = listItem.querySelector("label");
    var containsClass = listItem.classList.contains("editMode");

  if(containsClass) {
    label.innerText = editInput.value;
  } else {
    editInput.value = label.innerText;
  }
  listItem.classList.toggle("editMode");  
}

var deleteTask = function() {
  var listItem = this.parentNode;
  var ul = listItem.parentNode;

  ul.removeChild(listItem);
}

var taskCompleted = function() {
  var listItem = this.parentNode;
  completeTask.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);
}

var taskIncomplete = function() {
  var listItem = this.parentNode;
  todoTask.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
  var checkBox = taskListItem.querySelector("input[type=checkbox]");
  var editButton = taskListItem.querySelector("button.edit");
  var deleteButton = taskListItem.querySelector("button.delete");

  editButton.onclick = editTask;

  deleteButton.onclick = deleteTask;

  checkBox.onchange = checkBoxEventHandler;
}

addButton.addEventListener("click", addTask);

for(var i = 0; i < todoTask.children.length; i++) {
  bindTaskEvents(todoTask.children[i], taskCompleted);
}

for(var i = 0; i < completeTask.children.length; i++) {
  bindTaskEvents(completeTask.children[i], taskIncomplete);
}

Answer 1

Если вы тестируете / используете Google Chrome, вы можете использовать localStorage.setItem () и localStorage.getItem (). .SetItem () создает объект, сохраненный в вашем локальном хранилище. Метод принимает два аргумента: первый - это имя вашего объекта (выберите любое имя, которое вы хотите) в строковом формате, второй - это значение, которое нужно ввести внутрь объекта. Вы упомянули, что работаете с массивом в качестве возвращаемого элемента, 2-й аргумент .setItem () может принимать массив. Один нюанс, данные должны быть в формате JSON. Пример ниже.

const myArray = [1, 2, 3];
const myArrayToJson = JSON.stringify(myArray);
localStorage.setItem('myObjectName', myArrayToJson);

Теперь, когда вы обновляете свою страницу, где бы в своем коде вы ни отображали приложение на веб-странице, вы захотите использовать метод .getItem, который принимает один аргумент. Этот аргумент является именем объекта, который вы создали выше. Затем вы анализируете данные и вызываете их или воспроизводите их в любом месте.

const myFetchedArrayInJson = localStorage.getItem('myObjectName');
const myFetchedArrayParsed = JSON.parse(myFetchedArrayInJson);
--- Now do something with it.

Надеюсь, это поможет!