对本地存储的更改不正确

我有一些类似Todo应用程序的东西，可以删除、编辑并保存到本地存储。编辑出现问题。当我创建了一个任务并尝试编辑它时，一切都很顺利，更改也被保存了下来。但当我在页面上创建了两个任务，并试图编辑最后一个(较低的(任务时，什么也没发生，更准确地说，这个任务(我编辑的(消失了。简单地说，无论页面上有多少任务，我都只能编辑(页面上(最前面的一个。如何制作它，以便您可以编辑任何任务？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="sett">
<input type="text" name="" class="input" placeholder="Введите задачу" />
<button class="button">Добавить</button>
</div>
<div class="list">
<ul class="ul"></ul>
</div>
</div>
<button class="delete_sto">Удалит local</button>
<!-- <button class="button_delete">Удалить все</button> -->
<!-- <button class="red">Речить все</button> -->
<script src="assets/js/main.js"></script>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: gray;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: chocolate;
width: 900px;
min-height: 500px;
}
.sett {
text-align: center;
margin-top: 15px;
}
.sett input {
width: 200px;
height: 40px;
border: none;
border-radius: 25px;
outline: none;
padding-left: 5px;
}
.sett button {
width: 200px;
height: 40px;
border: none;
border-radius: 25px;
}
.list {
margin-top: 10px;
margin-left: 10px;
}
.task {
margin-top: 15px;
background-color: blueviolet;
min-width: 300px;
min-height: 50px;
}
.buttons {
display: flex;
}
.button_delete {
width: 200px;
height: 40px;
border: none;
border-radius: 25px;
background-color: rgb(135, 29, 29);
}
.red {
width: 200px;
height: 40px;
border: none;
border-radius: 25px;
background-color: rgb(16, 118, 219);
}
.text {
border: 1px solid black;
width: auto;
height: 200px;
}

JS-

//ИНИЦИЛИЗАЦИЯ
let input = document.querySelector(".input"); //Текст таска
let create_task = document.querySelector(".button"); //Создать
let ul = document.querySelector(".ul");
let delete_sto = document.querySelector(".delete_sto");
create_task.addEventListener("click", newtask);
let task = document.querySelector(".task");
delete_sto.addEventListener("click", function () {
localStorage.clear();
});
let obj = {};
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i);
ul.innerHTML += `<div class="task">
${localStorage.getItem(key)}
</div>`;
}
function newtask() {
let date = new Date();
//Добавление таска на страницу
ul.insertAdjacentHTML(
"afterbegin",
`
<div class="task">
<div class="text" contenteditable="true">
${input.value}
</div>
<button class="button_delete">Удалить</button>
<button class="check">Добавить checkbox</button>
<button class="red">Редактировать</button>
<p class="data">${
date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
}</p>
</div>
`
);
//Сохранение таска в localstorage
let HTMLtask = document.querySelector(".task");
let HTMLparse = HTMLtask.innerHTML;
localStorage.setItem(input.value, HTMLparse);
//УДАЛИТЬ
let button_del = document.querySelector(".button_delete");
button_del.addEventListener("click", del);
//РЕДАКТИРОВАТЬ
let red = document.querySelector(".red");
red.addEventListener("click", redd);
//Добавить чекбокс
let newcheck = document.querySelector(".check");
newcheck.addEventListener("click", function () {
let oldkey = localStorage.key(this.parentNode.children[0].innerText);
localStorage.removeItem(oldkey);
let tasktext = document.querySelector(".text");
let ch = document.createElement("input");
ch.type = "checkbox";
tasktext.append(ch);
let HTMLtask = document.querySelector(".task");
let HTMLparse = HTMLtask.innerHTML;
let newkey = red.parentNode.children[0].innerText;
localStorage.setItem(newkey, HTMLparse);
});
}
let button_del = document.querySelector(".button_delete");
button_del.addEventListener("click", del);
let red = document.querySelectorAll(".red");
red.addEventListener("click", redd);
function redd() {
let red = document.querySelector(".red");
let oldkey = localStorage.key(red.parentNode);
console.log(oldkey);
localStorage.removeItem(oldkey);
let newkey = red.parentNode.children[0].innerText;
console.log(newkey);
let parse = this.parentNode.innerHTML;
console.log(parse);
localStorage.setItem(newkey, parse);
}
function del() {
let button_del = document.querySelector(".button_delete");
button_del.parentNode.remove();
let key = localStorage.key(this);
localStorage.removeItem(key);
}

看，问题是您将一个函数绑定到所有任务，这些任务总是只引用第一个元素

function redd() {
let red = document.querySelector(".red");
let oldkey = localStorage.key(red.parentNode);
console.log(oldkey);
localStorage.removeItem(oldkey);
let newkey = red.parentNode.children[0].innerText;
console.log(newkey);
let parse = this.parentNode.innerHTML;
console.log(parse);
localStorage.setItem(newkey, parse);
}

let red = document.querySelector(".red");因为您的所有任务都有.red类，所以此选择器将始终与第一个一起工作

尝试使用上下文this例如

function redd() {
console.log(this.parentNode.children[0].innerText)
...

第二个问题是使用localstorage中的键作为输入字段
并且当您开始编辑任务时，您将无法再获得旧密钥。

我想用那种

let date = new Date
let uniqueID = date.getUTCMilliseconds()
ul.insertAdjacentHTML('afterbegin',
`
<div class="task" id="${uniqueID}">
<div class="text" contenteditable="true">
${input.value}
</div>
<button class="button_delete">Удалить</button>
<button class="check">Добавить checkbox</button>
<button class="red">Редактировать</button>
<p class="data">${date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()}</p>
</div>
`
)
let HTMLtask = document.querySelector('.task')
let HTMLparse = HTMLtask.innerHTML
localStorage.setItem(uniqueID, HTMLparse)

如您所见，我创建了uniqueID
并将其作为id添加到任务div中，并将其用于本地存储密钥
。这将有助于编辑任务
，这样就可以很容易地获得我所描述的更高的id任务(本地存储密钥(

第三个问题

let red = document.querySelectorAll(".red");
red.addEventListener("click", redd);

在.querySelectorAll之后，你得到了节点列表数组，而不是函数
，并且你不能使用函数方法，因为
应该是类似的东西

let red = document.querySelectorAll('.red')
for (let i = 0; i < red.length; i++) {
red[i].addEventListener('click', redd)
}

建议
只保存到本地存储任务的数据(日期、文本、状态(，
而不是整个html
将来，如果你想更改项目的设计，
你将如何更改所有本地存储中的html？？？

您的代码存在许多问题：

"querySelector"总是得到第一个元素。您仅将事件添加到第一个元素===>只能编辑或删除第一个任务
"querySelectorAll：返回一个名为节点列表的数组。不能将事件添加到节点列表中，只能将事件添加至特殊节点中
不要将任务的内容用作密钥。如果两个任务具有相同的内容，则会导致错误。让我们创建一个唯一的密钥。因为这只是一个例子，所以您可以使用时间戳作为密钥，这是一种快速而简单的方法！。
我修复了"；del"；以及"；红色"；在您的代码中，请参阅下面的。只需复制并替换所有javascript代码。您可以修复"；"检查"；你自己

let input = document.querySelector('.input') //Текст таска
let create_task = document.querySelector('.button') //Создать
let ul = document.querySelector('.ul')
let delete_sto = document.querySelector('.delete_sto')
create_task.addEventListener('click', newtask)
let task = document.querySelector('.task')
delete_sto.addEventListener('click', function () {
localStorage.clear()
})
let obj = {}
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i)
ul.innerHTML += `<div class="task">
${localStorage.getItem(key)}
</div>`
}
function newtask() {
let date = new Date();
let id = date.valueOf();
//Добавление таска на страницу
ul.insertAdjacentHTML('afterbegin',
`
<div class="task">
<div class="text" contenteditable="true">
${input.value}
</div>
<button class="button_delete" onclick="del(this,${id});">Удалить</button>
<button class="check" ">Добавить checkbox</button>
<button class="red" onclick="redd(this,${id});">Редактировать</button>
<p class="data">${date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()}</p>
</div>
`
)
//Сохранение таска в localstorage
let HTMLtask = document.querySelector('.task')
let HTMLparse = HTMLtask.innerHTML
localStorage.setItem(id, HTMLparse)
//УДАЛИТЬ
// let button_del = document.querySelector('.button_delete')
// button_del.addEventListener('click', del)
//РЕДАКТИРОВАТЬ
// let red = document.querySelector('.red')
// red.addEventListener('click', redd)
//Добавить чекбокс
// let newcheck = document.querySelector('.check')
// newcheck.addEventListener('click', function () {
//     let oldkey = localStorage.key(this.parentNode.children[0].innerText)
//     localStorage.removeItem(oldkey)
//     let tasktext = document.querySelector('.text')
//     let ch = document.createElement('input')
//     ch.type = 'checkbox'
//     tasktext.append(ch)
//     let HTMLtask = document.querySelector('.task')
//     let HTMLparse = HTMLtask.innerHTML
//     let newkey = red.parentNode.children[0].innerText
//     localStorage.setItem(newkey, HTMLparse)
// })
}

// let button_del = document.querySelector('.button_delete')
// button_del.addEventListener('click', del)
// let red = document.querySelectorAll('.red')
// red.addEventListener('click', redd)

function redd(e, id) {
console.log(id);
localStorage.removeItem(id)
let parse = e.parentNode.outerHTML
localStorage.setItem(id, parse)
}
function del(e, id) {
e.parentNode.remove()
localStorage.removeItem(id)
}

相关内容

最新更新

热门标签：