浏览器刷新后保留待办事项结果
我创建了一个待办事项应用程序来添加和删除页面上的任务。
但是，我想在浏览器刷新时保留待办事项结果。是否有可能像在数据库或任何存储上存储数据一样保存这些结果？任何想法，使这个保存数据？？
现在我在这里发布了完整的代码！因为我之前不能在这里发布代码
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 element
addBr();
<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
使用本地存储来读取页面加载时的项目，并在项目更改时写入项目，就像在最终版本中一样要保留待办事项条目，您需要将其存储在数据库中。这可以是网站中的本地数据库，如本地存储。或者，您需要构建一个连接到数据库的后端，并从那里发送和加载数据。本地存储示例：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());
随时随地看视频慕课网APP
相关分类
JavaScript