我创建了一个待办事项应用程序来添加和删除页面上的任务。但是，我想在浏览器刷新时保留待办事项结果。是否有可能像在数据库或任何存储上存储数据一样保存这些结果？任何想法，使这个保存数据？？现在我在这里发布了完整的代码！因为我之前不能在这里发布代码let menu = document.querySelector(".bs");let btn1 = document.querySelector(".btn");let btn2 = document.querySelector(".btn3"); let irp = document.querySelector(".date");let inp = document.querySelector(".input");let bsd = document.querySelector(".sss");let brs = document.querySelector(".marker");let addBr = () => { btn1.addEventListener("click", addBr); let br = document.createElement("DIV"); let dd = document.createElement("H1"); dd.innerHTML = (inp.value); br.className = "red"; var bn = document.createElement("H1"); bn.innerHTML = (irp.value); menu.appendChild(br); br.appendChild(dd); br.appendChild(bn); if( inp.value == "") { br.remove(); } else { menu.appendChild(br); } if( irp.value == "") { dd.innerHTML = "Albenis"; } else { menu.appendChild(br); } let ttt = document.createElement("BUTTON"); ttt.className = "marker"; ttt.innerHTML = "Remove"; br.appendChild(ttt); // This is the important change. Part of creating the .ttt element // is setting up its event listeners! ttt.addEventListener('click', () => br.remove()); };btn1.addEventListener("click", addBr);// Call `addBr` once to add the initial elementaddBr();<html><body><div class="bs"><input type="text" class="input"><input type="date" class="date"><button class="btn">Add</button></div></body></html>
1 回答
精慕HU
TA贡献1845条经验 获得超8个赞
使用本地存储来读取页面加载时的项目，并在项目更改时写入项目，就像在最终版本中一样
要保留待办事项条目，您需要将其存储在数据库中。这可以是网站中的本地数据库，如本地存储。或者，您需要构建一个连接到数据库的后端，并从那里发送和加载数据。
本地存储示例：
const items = [{ name: "My Todo" }, { name: "My Todo 2" }];
const setItems = () => {
localStorage.setItem("items", JSON.stringify(items));
};
const getItems = () => {
return JSON.parse(localStorage.getItem("items"));
};
包括您的代码：
const getItems = () => {
return JSON.parse(localStorage.getItem("items"));
};
const items = getItems() || [];
const setItems = () => {
localStorage.setItem("items", JSON.stringify(items));
};
let addBr = (item) => {
let br = document.createElement("DIV");
let dd = document.createElement("H1");
dd.innerHTML = (item ? item.name : inp.value);
br.className = "red";
var bn = document.createElement("H1");
bn.innerHTML = (item ? item.name : irp.value);
if (!item) {
items.push({ name: inp.value });
setItems();
}
menu.appendChild(br);
br.appendChild(dd);
br.appendChild(bn);
if( inp.value == "") {
br.remove();
}
else {
menu.appendChild(br);
}
if( irp.value == "") {
dd.innerHTML = "Albenis";
}
else {
menu.appendChild(br);
}
let ttt = document.createElement("BUTTON");
ttt.className = "marker";
ttt.innerHTML = "Remove";
br.appendChild(ttt);
// This is the important change. Part of creating the .ttt element
// is setting up its event listeners!
ttt.addEventListener('click', () => br.remove());
};
for (const item of items) {
addBr(item);
}
btn1.addEventListener("click", () => addBr());
添加回答
举报
0/150
提交
取消