How can we store the data for TO-DO list? -Local Storage-
When you create your app , How do keep the data? If you are a beginner , manipulating data using database may be difficult.
In this article , I will introduce Local Storage that I used to make an easy To-do list app without database.
The goal of this article is ….
- understanding what Local storage is.
- creating the simplest TO-DO list with Local Storage.
here is demo.
1.what is Local storage?
Local storage is one of WebStorage API that allows you to store any information you want in your user’s browser using javascript.
you can save the data locally with key and value pairs.
web storage that allows you to access a local Storage object with no expiration date. So even after the browser window has been closed, the data stored in the browser will remain.
if you want to check Local Storage visually on the browser,
just go to the developer tools on your browser, then go to the Application tab.

To use LocalStorage in your web applications, there are some methods.
・setItem() is a way to add item to the storage.
localStorage.setItem(key,value)・getItem() is used to get a string value from storage.
localStorage.getItem(key)・removeItem() is used to remove the data identified by key from the storage.
localStorage.removeItem(key)・clear() is used to delete every data from Storage.
localStorage.clear()2. To-doList tutorial
First we’ll create html file and css file .
here is html code.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/style.css"></head>
<body><div id="container">
<form action="#" onsubmit="add(event)"> <input id="input" type="text" placeholder="add tasks..." required> <input type="submit"> </form>
<h1>to do</h1>
<ul id="output"></ul>
</div><script src="js/index.js"></script></body></html>
I set up 4 things inside <body> tag.
・a text input — to type in new To-do tasks
・a button — to add a new to-do task to To-do list
・title (“To do”)
・To-do list area — the area new tasks will be inserted.
this is what it looks like:

then, we’ll work on Javascript file.
JS STEP1 : Getting elements to manipulate
First, I’m just going to set up some variables for the elements on the page.
let lists = document.getElementById("output");let newInput = document.getElementById("input");
JS STEP2 :create function to make lists
Next, I’ll create a function for making an li element and button to delete the list.
I used appendChild() method to append the list item and button to the ul(“lists”) .
The each button are set new attribute to execute the remove() function that i’ll create later when the button clicked.
const listMaker = text => {let newTask = document.createElement("li");newTask.textContent = text;lists.appendChild(newTask);let btn = document.createElement("button");btn.innerHTML = "deleate";newTask.appendChild(btn);btn.setAttribute("onclick", "remove()")}
step3 : create function that be executed when the submit button clicked
I’ll call listMaker function .
and e.preventDefault() is working to prevent the form from default submit action.
function add(event) {event.preventDefault();listMaker(newInput.value);document.getElementById("input").value = "";}
step4: create function to delete the list
In this case , this.event.currentTarget.parentNode means the list with the delete button you clicked.
The list will be deleted from the ul(“lists) .
function remove(event) {let deleateTask = this.event.currentTarget.parentNode;lists.removeChild(deleateTask);}
Now we have a to-do items to a list but it dosen’t keep the data. when you close or refresh the browser, the To-do tasks you typed in will be gone.
so we’ll integrate Local Storage.
step5:integrating Local Storage
First we need to declare an array to store items.
The JSON.stringify() is a method to converts a JavaScript object or value to a JSON string .
The Json.parse() method parse a string and returns a JavaScript object.
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []localStorage.setItem('items', JSON.stringify(itemsArray))const data = JSON.parse(localStorage.getItem('items'))
we’ll add this code to add() function
//update the array(insert new item to array)itemsArray.push(newInput.value)localStorage.setItem('items', JSON.stringify(itemsArray))
This will work to display all existing stored information in Local Storage on the web page every time we open the app on the browser.
data.forEach(item => {listMaker(item)})
we’ll add this code to remove function
//deleate list from arraylet result = itemsArray.indexOf( deleateTask.textContent);let newlist = itemsArray.splice(result, 1);//update the local storagelocalStorage.setItem('items', JSON.stringify(itemsArray))
here is full Javascript code.
//index.jslet lists = document.getElementById("output");let newInput = document.getElementById("input");let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []localStorage.setItem('items', JSON.stringify(itemsArray))const data = JSON.parse(localStorage.getItem('items'))const listMaker = text => {let newTask = document.createElement("li");newTask.textContent = text;lists.appendChild(newTask);let btn = document.createElement("button");btn.innerHTML = "deleate";newTask.appendChild(btn);
btn.setAttribute("onclick", "remove()")}function add(event) {event.preventDefault();
//update the array(insert new item to array)itemsArray.push(newInput.value)localStorage.setItem('items', JSON.stringify(itemsArray))
listMaker(newInput.value);document.getElementById("input").value = "";}data.forEach(item => {listMaker(item)})function remove(event) {//delete list from to do listlet deleateTask = this.event.currentTarget.parentNode;lists.removeChild(deleateTask);
//deleate list from arraylet result = itemsArray.indexOf( deleateTask.textContent);let newlist = itemsArray.splice(result, 1);//update the local storagelocalStorage.setItem('items', JSON.stringify(itemsArray))}
reference
