Question

几乎完成（最后）建立一个简单的待办事项清单。

我试图改进我迄今为止所做的工作。

一个大问题是，如果你要为例如添加任务＆＃39;任务1＆＃39;然后＆＃39;任务2＆＃39;数组自然会按顺序保存它们。

问题在于你是否已经完成了＃39;说任务2，然后＆＃39;未完成＆＃39;它会回到列表的顶部。

但是我使用本地存储来保存我的数据，所以即使它在刷新时位于前端列表的顶部也不会留在那里，因为在阵列中它就位2。

我知道＆＃39;不合时宜的＆＃39;方法，但不知道如何在我已完成/未完成的任务方法中使用它。

基本上我希望我的任务从完全返回到未完成是优先级，然后转到未完成的任务列表的顶部，从而将该订单保存在我的本地存储阵列中。

https://jsfiddle.net/1uopkysn/

由于

JS

// To do list

var storeToDos = [];

// 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('div');
  deleteToDo.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7.1 7.1l9.8 9.8M7.1 16.9l9.8-9.8"/></svg>';
  deleteToDo.classList.add('delete-to-do');
  var editToDo = document.createElement('div');
  editToDo.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M16 3l5 5L8 21H3v-5z"/></svg>';
  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 listItem = createListItem();
  var taskHolderValue = taskHolder.value;
  if(taskHolderValue) {
    var taskHolderElement = document.createElement('label');
    taskHolderElement.classList.add('to-do-item');
    listItem.insertBefore(taskHolderElement, listItem.childNodes[0]);
    var storeToDosObj = {
      value: '',
      id: null,
      completed: false
    }
    storeToDosObj.value = taskHolderValue;
    var listId = storeToDosObj.id = Date.now();
    listItem.id = listId;
    uncompleteTasks.insertBefore(listItem, uncompleteTasks.childNodes[0]);
    var storedToDos = localStorage.getItem('todos');
    if(storedToDos) {
      var storedToDosArr = JSON.parse(localStorage.todos);
      storedToDosArr.push(storeToDosObj);
      localStorage.setItem('todos', JSON.stringify(storedToDosArr));
    } else {
      console.log(storeToDos);
      storeToDos.push(storeToDosObj);
      localStorage.setItem('todos', JSON.stringify(storeToDos));
    }
    taskHolderElement.innerHTML = taskHolderValue;
    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;
  var parentItem = listItem.parentNode;
  var getToDos = JSON.parse(localStorage.getItem('todos'));
  for(var b=0; b<getToDos.length; b++) {
    if(getToDos[b].id == listItem.id) {
      getToDos.splice(b, 1);
      localStorage.setItem('todos', JSON.stringify(getToDos));
    }
  }
  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;
    var storedLocalStorage = JSON.parse(localStorage.todos);
    for(var d=0; d<storedLocalStorage.length; d++) {
      if(storedLocalStorage[d].id == listItem.id) {
        storedLocalStorage[d].value = editedValue;
        localStorage.setItem('todos', JSON.stringify(storedLocalStorage));
      }
    }
  }
  listItem.classList.toggle('editing');
  listParent.querySelector('input.edit-holder').value = '';
}

// 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;

  var storedCompletion = JSON.parse(localStorage.getItem('todos'));
  if(storedCompletion) {
    if(listItem.classList.contains('editing')) {

    }
    for(var e=0; e<storedCompletion.length; e++) {
      if(storedCompletion[e].id == listItem.id) {
        if(storedCompletion[e].completed === true) {
          this.parentNode.classList.add('completed');
          uncompleteTasks.insertBefore(listItem, uncompleteTasks.childNodes[0]);
          this.parentNode.classList.remove('completed');
          bindEvents(listItem, taskCompleted);
          storedCompletion[e].completed = false;
        } else {
          completedTasks.insertBefore(listItem, completedTasks.childNodes[0]);
          this.parentNode.classList.add('completed');
          bindEvents(listItem, taskUncompleted);
          storedCompletion[e].completed = true;
        }
        localStorage.setItem('todos', JSON.stringify(storedCompletion));
      }
    }
  }
}

// Task uncompleted
var taskUncompleted = function() {
  var listItem = this.parentNode;
  uncompleteTasks.insertBefore(listItem, uncompleteTasks.childNodes[0]);
  this.parentNode.classList.remove('completed');
  bindEvents(listItem, taskCompleted);

  if(localStorage) {
    var storedCompletion = JSON.parse(localStorage.getItem('todos'));
  }

  for(var f=0; f<storedCompletion.length; f++) {
    if(storedCompletion[f].id == listItem.id) {
      storedCompletion[f].completed = false;
      localStorage.setItem('todos', JSON.stringify(storedCompletion));
    }
  }
}

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

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

// Render local storage
var getToDos = JSON.parse(localStorage.getItem('todos'));
console.log(getToDos);
if(getToDos) {
  for(i=0; i<getToDos.length; i++) {
    var listItem = createListItem();
    listItem.id = getToDos[i].id;
    var storedListItem = document.createElement('label');
    storedListItem.innerHTML = getToDos[i].value;
    listItem.insertBefore(storedListItem, listItem.childNodes[0]);
    if(getToDos[i].completed === true) {
      listItem.querySelector('input').checked = true;
      completedTasks.appendChild(listItem);
      listItem.classList.add('completed');
    } else {
      uncompleteTasks.appendChild(listItem);
    }
    bindEvents(listItem, taskCompleted)
  }
}

Answer 1

您可以将时间戳与项目关联，并根据已完成和未完成列表中的时间戳显示它们。但是LocalStorage中没有排序方法，同样不能在具体之前或之后插入。

您可以像这样对从json检索到的数组进行排序（取自this answer）。你可以使用时间戳来排序数组 - JSFiddle here。

ArrayList

希望这有帮助。

Answer 2

在内存中更改内容时如何更新存储的数组？因此，每次更改视图时，都会更新＆＃34;模型＆＃34;，从而更新JSON数组并再次保存。

在完成时在数组的开头添加项目

2 个答案: