在這個例子中使用本地存儲的最佳方式是什麼？

Question

我已經建立了一個在香草JS做的列表，但現在我想將其轉換爲本地存儲。

我知道如何在本地存儲中使用set，get和remove，但我不知道如何在我的應用中使用它。

因爲每個要做的項目都有文本，刪除按鈕，編輯按鈕，複選框等我不知道如何保存。

或者我可以只保存文本，並以某種方式呈現與其他元素？

只是想了解理論/最好的方式來思考採取這項任務。

我想知道是否有一種簡單的方法來做到這一點，或者更多的是完全重構應用程序的方式。

乾杯

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的字符串。

每當頁面加載時，您應該填充待辦事項列表，並且每當待辦事項列表發生更改時，您應該將更改保存回localStorage。

最後你應該修改你的代碼，通過陣列中的每個用戶添加或刪除待辦事項列表項，可能使用Array#splice刪除項目和Array#push追加一個新的結束時間進行迭代，然後重新創建你的整個待辦事項列表部分。