javascript - 在此示例中使用本地存储的最佳方式是什么？

Question

我已经在 vanilla JS 中构建了一个待办事项列表，但现在我想将其转换为本地存储。

我知道如何在本地存储中使用设置、获取和删除，但我不确定如何在我的应用程序上使用它。

因为每个待办事项都有文本、删除按钮、编辑按钮、复选框等，我不确定如何保存它们。

或者我可以只保存文本并以某种方式使用其他元素渲染它吗？

只是想了解理论/考虑承担这项任务的最佳方式。

我想知道是否有一种简单的方法可以做到这一点，或者更多的是完全重构应用程序的工作方式。

干杯

JS

// To do list

// Cache DOM
var addToDo = document.getElementById('add-to-do');
var taskHolder = document.getElementById('task-holder');
var uncompleteTasks = document.getElementById('uncompleted-tasks');
var completedTasks = document.getElementById('completed-tasks');

// Bind events
var bindEvents = function(listItem, checkboxEventHandler) {
  // Delete
  var deleteToDo = listItem.querySelector('.delete-to-do');
  deleteToDo.addEventListener('click', deleteTask);
  // Edit
  listItem.querySelector('.edit-to-do').addEventListener('click', editTask);
  listItem.querySelector('.edit-holder').addEventListener('keyup', editTaskEnter);
  // Checkbox
  var checkbox = listItem.querySelector('input.edit-to-do');
  checkbox.onchange = checkboxEventHandler;
}

// Create list item
var createListItem = function() {
  var listItem = document.createElement('li');
  var deleteToDo = document.createElement('button');
  deleteToDo.innerHTML = 'delete';
  deleteToDo.classList.add('delete-to-do');
  var editToDo = document.createElement('button');
  editToDo.innerHTML = 'edit';
  editToDo.classList.add('edit-to-do');
  var toDoStatus = document.createElement('input');
  toDoStatus.type = 'checkbox';
  toDoStatus.classList.add('edit-to-do');
  var editHolder = document.createElement('input');
  editHolder.type = 'text';
  editHolder.classList.add('edit-holder');

  listItem.appendChild(deleteToDo);
  listItem.appendChild(editToDo);
  listItem.appendChild(toDoStatus);
  listItem.appendChild(editHolder);

  return listItem;
}

// Add task
var addTask = function(e) {
  var taskHolderValue = taskHolder.value;
  if(taskHolderValue) {
    var taskHolderElement = document.createElement('label');
    taskHolderElement.classList.add('to-do-item');
    taskHolderElement.innerHTML = taskHolderValue;
    var listItem = createListItem();
    listItem.insertBefore(taskHolderElement, listItem.childNodes[0]);
    uncompleteTasks.appendChild(listItem);
    bindEvents(listItem, taskCompleted);

    taskHolder.value = '';
  } else {
    alert("You didn't add a to a to do!");
  }
}

var addTaskEnter = function(e) {
  var key = 'which' in e ? e.which : e.keyCode;
  if(key === 13) {
    addTask();
  }
}

// Delete task
var deleteTask = function() {
  var listItem = this.parentNode;
  console.log(listItem);
  var parentItem = listItem.parentNode;
  parentItem.removeChild(listItem);
}

// Edit task
var editTask = function() {
  var defaultValue = this.parentNode.querySelector('label').innerHTML;
  var listItem = this.parentNode;
  var listParent = this.parentNode;
  var editedValue = listParent.querySelector('input.edit-holder').value;
  if(listItem.classList.contains('editing') && editedValue) {
    listParent.querySelector('label').innerHTML = editedValue;
  }
  listItem.classList.toggle('editing');
}

// Edit task enter
var editTaskEnter = function(e) {
  var key = 'which' in e ? e.which : e.keyCode;
  if(key === 13) {
    editTask.call(this);
  }
}

// Task completed
var taskCompleted = function() {
  var listItem = this.parentNode;
  completedTasks.appendChild(listItem);
  this.parentNode.classList.add('completed');
  bindEvents(listItem, taskUncompleted);
}

// Task uncompleted
var taskUncompleted = function() {
  var listItem = this.parentNode;
  uncompleteTasks.appendChild(listItem);
  this.parentNode.classList.remove('completed');
  bindEvents(listItem, taskCompleted);
}

// Add task
addToDo.addEventListener("click", addTask);
taskHolder.addEventListener("keyup", addTaskEnter);

// Loop over uncomplete tasks
for(i=0; i<completedTasks.length; i++) {
  var listItem = completedTasks[i];
  uncompleteTasks.appendChild(listItem);
  bindEvents(listItem, completedTasks);
}

Answer 1

您实际上不需要保存任何 html，但您可以保存与其相关的内容。这完全取决于您存储待办事项列表的方式。考虑创建某种可用于存储待办事项列表项的变量，例如数组或对象。

一种常见的方法是使用对象数组。这是有益的，因为您还可以在其中添加额外的详细信息。像这样的事情:

var todos = [ { id: 1, text : "Clean", completed : true}, { id : 2, text : "Eat", completed : false } ... ]

在此示例中，我放置了一个 id，以便稍后可以使用它来引用特定项目，但这并不是绝对必要的。

使用JSON#parse和JSON#stringify您可以将此数组与字符串相互转换，以便将其存储在 localStorage 中。

每当页面加载时，您都应该填充该待办事项列表，每当待办事项列表发生更改时，您都应该将更改保存回本地存储。

最后，您应该修改代码以在每次用户添加或删除待办事项列表项时迭代数组，可能使用 Array#splice删除该项目并 Array#push将新的待办事项添加到末尾，然后重新创建整个待办事项列表部分。