Keep Todo Results after browser refreshing

Question

I created a todo app to add and remove tasks on the page.
however i would like to keep todo results when browser refreshed . Is that possible to make this like storing data on db or any storage to save these results? any idea to make this to save data ??

Now I posted the complete code hereee! because i cant posted code here before

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>

Does this answer your question: [What is the difference between localStorage, sessionStorage, session and cookies?](https://stackoverflow.com/a/19869560/3113485) — terrymorse, Jun 10 '20 at 17:48
if localstorage saves entries it would be nice who tell me how to configure localstorage in javascript — Albenis Kërqeli, Jun 10 '20 at 18:00

ardean · Accepted Answer · 2020-06-14T10:20:05.720

2

TL;DR: use localStorage to read the items at page load and write the items when they change, like in the final version

To keep your todo entries, you need to store it in a Database. This can be either a local database in the website like localStorage. Or you need to build a backend which is connected to a Database and send and load the Data from there.

localStorage example:

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"));
};

Including your code:

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

edited Jun 14 '20 at 10:20

answered Jun 10 '20 at 17:48

ardean

152
7

I just want only keep todo items when browser refreshing no any database i know with php is more easier because items saved on server and database – Albenis Kërqeli Jun 10 '20 at 17:56
You need to keep track of your items in your HTML Element render code. Your goal is to render a array of items like: [{ name: "My Todo" }, { name: "My Todo 2" }] – ardean Jun 10 '20 at 18:19
Uncaught ReferenceError: Cannot access 'addBr' before initialization ? how to fix that ? can you tell me – Albenis Kërqeli Jun 10 '20 at 18:26
you need to declare the `addBr ` function before you call it. I will adjust my answer. – ardean Jun 10 '20 at 18:29
this method not worked ,i cannot add todos any more , it shows todo with name my todo 1 and my todo 2 !! – Albenis Kërqeli Jun 10 '20 at 18:41
yes because you can empty the array like const items = []; my answer has example data in it. Get the items using const items = getItems() || []; using my getItems function... – ardean Jun 10 '20 at 18:50
and how to write now because my todo doesnt produce any item? after removing arrays – Albenis Kërqeli Jun 10 '20 at 18:59
change btn1.addEventListener("click", addBr); to btn1.addEventListener("click", () => addBr()); – ardean Jun 10 '20 at 19:05
thanks now this now fixed but when i refresh browser todo not saved on localstorage still not worked i remove array and make only const items = []; but still dont worked – Albenis Kërqeli Jun 10 '20 at 19:13
yes now you need to save the items with the setItems(); function but before you call setItems(); need to push the new item into the items array. – ardean Jun 10 '20 at 19:14
still not worked thank you very much for your helping me ,still not saved when browser refreshed – Albenis Kërqeli Jun 10 '20 at 19:23
you can look in the console for localStorage entries: https://developers.google.com/web/tools/chrome-devtools/storage/localstorage – ardean Jun 10 '20 at 19:27
no any errors in if you want i can send you all the code of editor – Albenis Kërqeli Jun 10 '20 at 19:27
https://jsfiddle.net/dkepz9av/258/ all the code now i uploaded in new jsfiddle – Albenis Kërqeli Jun 10 '20 at 19:28
i want to save created todos in html page when browser refreshing , is this possible? – Albenis Kërqeli Jun 10 '20 at 19:40
1

https://jsfiddle.net/7kodcf9v/ had a small bug, this is the fully working version – ardean Jun 10 '20 at 19:46

Keep Todo Results after browser refreshing

1 Answers1