时间戳

首页 > 解决方案 > 刷新浏览器后保留 Todo 结果

javascript - 刷新浏览器后保留 Todo 结果

问题描述

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

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

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>

标签： javascript

解决方案

TL;DR：使用 localStorage 在页面加载时读取项目并在项目更改时写入项目，就像在最终版本中一样

要保留待办事项条目，您需要将其存储在数据库中。这可以是网站中的本地数据库，例如localStorage。或者您需要构建一个连接到数据库的后端并从那里发送和加载数据。

本地存储示例：

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());

推荐阅读