[英]To-do list JavaScript
我正在嘗試制作待辦事項列表,但我被本地存儲卡住了。 重新加載頁面時沒有任何顯示。 我認為這是關於 changeStorage() 方法,但我不完全理解我做錯了什么。
function addTask() {
let addTaskButton = document.getElementById('add-task-button')
let list = document.getElementById('task-list');
let li = document.createElement('li');
let checkbox = document.createElement('input');
let taskText = document.createElement('span');
let delButton = document.createElement('button');
let btnText = document.createTextNode('Delete task');
checkbox.addEventListener('change', changeStorage);
checkbox.type = 'checkbox';
checkbox.className = 'checkbox';
taskText.innerText = document.getElementById('input-task').value;
taskText.className = 'task';
delButton.className = 'delete-btn';
delButton.onclick = deleteTask;
addTaskButton.addEventListener('click', changeStorage);
delButton.appendChild(btnText);
li.appendChild(checkbox);
li.appendChild(taskText);
li.appendChild(delButton);
list.appendChild(li);
document.getElementById('input-task').value = '';
}
function changeStorage() {
let tasks = document.getElementById('ul').innerHTML;
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function deleteTask () {
this.parentNode.remove();
changeStorage();
}
document.getElementById('add-task-button').addEventListener('click', addTask);
function loadList() {
document.querySelector('ul').innerHTML = JSON.parse(localStorage.getItem("tasks")) || [];
}
window.addEventListener('load', loadList);
這應該將存儲在 localStorage 中的內容更改為有效的 JSON 字符串,然后在加載時從中重建 LI 元素。
function changeStorage() {
let tasks = [...document.querySelectorAll("ul li")].map(t => t.innerHTML);
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function loadList() {
document.querySelector('ul').innerHTML = (JSON.parse(localStorage.getItem("tasks")) || []).map(t => "<li>" + t + "</li>").join("");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.