猿问

浏览器刷新后保留待办事项结果

我创建了一个待办事项应用程序来添加和删除页面上的任务。
但是，我想在浏览器刷新时保留待办事项结果。是否有可能像在数据库或任何存储上存储数据一样保存这些结果？任何想法，使这个保存数据？？

现在我在这里发布了完整的代码！因为我之前不能在这里发布代码

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>


绝地无双
浏览 114回答 1
1回答

精慕HU

使用本地存储来读取页面加载时的项目，并在项目更改时写入项目，就像在最终版本中一样要保留待办事项条目，您需要将其存储在数据库中。这可以是网站中的本地数据库，如本地存储。或者，您需要构建一个连接到数据库的后端，并从那里发送和加载数据。本地存储示例：const items = [{ name: "My Todo" }, { name: "My Todo 2" }];const setItems = () => {&nbsp; localStorage.setItem("items", JSON.stringify(items));};const getItems = () => {&nbsp; return JSON.parse(localStorage.getItem("items"));};包括您的代码：const getItems = () => {&nbsp; return JSON.parse(localStorage.getItem("items"));};const items = getItems() || [];const setItems = () => {&nbsp; localStorage.setItem("items", JSON.stringify(items));};let addBr = (item) => {&nbsp; let br = document.createElement("DIV");&nbsp; let dd&nbsp; =&nbsp; document.createElement("H1");&nbsp; dd.innerHTML = (item ? item.name : inp.value);&nbsp; br.className = "red";&nbsp; var bn = document.createElement("H1");&nbsp; bn.innerHTML = (item ? item.name : irp.value);&nbsp; if (!item) {&nbsp; &nbsp; items.push({ name: inp.value });&nbsp; &nbsp; setItems();&nbsp; }&nbsp; menu.appendChild(br);&nbsp; br.appendChild(dd);&nbsp; &nbsp; br.appendChild(bn);&nbsp; if(&nbsp; inp.value == "") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; br.remove();&nbsp; }&nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp;menu.appendChild(br);&nbsp; }&nbsp; if(&nbsp; irp.value == "") {&nbsp; &nbsp;dd.innerHTML = "Albenis";&nbsp; }&nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp;menu.appendChild(br);&nbsp; }&nbsp; let ttt = document.createElement("BUTTON");&nbsp; ttt.className = "marker";&nbsp; ttt.innerHTML = "Remove";&nbsp; br.appendChild(ttt);&nbsp; // This is the important change. Part of creating the .ttt element&nbsp; // is setting up its event listeners!&nbsp; ttt.addEventListener('click', () => br.remove());};for (const item of items) {&nbsp; addBr(item);}btn1.addEventListener("click", () => addBr());
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答