Simple to do list maker using html5 Local storage and javascript

Hello, friends in this tutorial we are going to learn about html5 local storage by the end of the tutorial we will make simple do to list maker where we can add item to the list and clear the whole list. This is not something professional to do maker but it made to just play around with local storage. But First let’s understand.

What is HTML5 Local Storage?
Local storage is one of the features of html5 which allows us to store the simple data on clients browser locally without the need of any server side database. When ever user visits that page again it retrieves the data back from the browser local storage and displays it. Using local storage you can increase your web application speed and reduce server bandwidth. In simple words we can say it helps us to do things locally in just javascript without the need of any server-side scripting language like php. Local Storage can be used to store users user name and password very easily. Cookies can be replaced by local Storage. It stores data with no expiration date.
Local Storage does not destroy the data automatically until user deletes it. So it remains there permanent which is very helpful for us. Unlike session which gets destroyed when we close the browser. Unlike cookies local storage can store data larger than 5 MB. That’s even better.

How to store the data ?
It’s very simple to store the data into clients browser using local storage. All you have to do is to call a function setItem
localStorage.setItem(Key, Value); // Key can be used as a titile and value as a content

How to Retrieve data ?
In order to retrieve data you have to call a function getItem
localStorage.getItem(key); // only key is passed as parameter and it will give value
How to see where data is saved ?



To do maker

In order to see where you data is stored right click your mouse -> go to inspect element -> 
Click on Resourses -> Click on local Storage
And here you can see the stored key and value of a particular website.

Let’s begin
So let’s begin to make this simple to do maker.




<!DOCTYPE html>
<html lang="en">
<head>
 
<link rel ="stylesheet" href="style.css">
<script src="local.js"> </script>
</head>
<body>
<section id= "leftbox">
<form>
<table>
<tr><td>DATE:</td><td> <input type="text" id="one"></td></tr>
<tr><td>WORK TO DO:</td><td><textarea id="two"></textarea></td></tr>
<tr><td><input type="button" id="button" value="Add to the list"></td><td><input type="button"
 id="clear" value="Clear the list"></td></tr>
</table>
</form>
</section>
<section id="rightbox">
List things to do
</section>
</body>
</html> 




So in the above code we have created two input box in the section leftbox, one is date and other is work to do. Date is the “key” and work to do is the “value” of the local storage. date is of id one and work is of id two. There are two buttons one to add to the list and other to clear the whole list. In the section right box there nothing it’s just “List of things to do”

Now create a file name local.js and paste the following code.

function loadfirst(){
var button = document.getElementById('button');
button.addEventListener('click', save, false);
var clear = document.getElementById('clear');
clear.addEventListener('click', cleardata, false);
display();
}
 
function save(){
var one= document.getElementById('one').value;
var two= document.getElementById('two').value;
localStorage.setItem(one, two);
display();
document.getElementById('one').value = "";
document.getElementById('two').value = "";
window.location.reload();
 
}
 
function cleardata(){
localStorage.clear();
window.location.reload();
}
 
function display(){
for( var x= 0; x<localStorage.length; x++)
{
var a = localStorage.key(x);
var b = localStorage.getItem(a);
var newDiv = document.createElement("div");
var newContent = document.createTextNode(a +" - "+ b);
newDiv.appendChild(newContent); //add the text node to the newly created div.
newDiv.setAttribute("id", x);
newDiv.style.fontSize = "28px";
newDiv.style.color ="white";
newDiv.style.width="200px";
newDiv.style.height="200px";
newDiv.style.backgroundColor="#3994d1";
document.getElementsByTagName("body")[0].appendChild(newDiv); 
newDiv.style.position = "relative";
newDiv.style.border ="1px solid white";
newDiv.style.float ="left";
newDiv.style.left = "25px";
newDiv.style.top = "25px";
}
}
 
window.addEventListener('load', loadfirst, false);



Now this is the main javascript file which uses the function local storage. Here we have created four functions

loadfirst(); // this function will be called as soon as the window loads
save(); // It consists of local storage function setItem
cleardata(); // It is used to delete the local storage data
display(); // It is used to retrieve the local storage data by getItem


The loadfirst() function is used to access the two buttons named with id “button” and “clear”. We are making this function clickable that when a user will click the button it will call the function save() and when user will click the button with id clear it will call the function cleardata()
Looking into the function save.

var one= document.getElementById('one').value;
var two= document.getElementById('two').value;
localStorage.setItem(one, two);
display();

In this function we are accessing the two input fields with id “one ” and “two and storing it’s value into the variable one and two.
then we are using function localStorage.setItem(one, two) to save the data into persons computer. That’s all.

window.location.reload(); // Used to refresh the browser after saving the list to update

In the display function


We have used
localStorage.length // It generally gives a number of how many items have been stored into the local storage

So, using for loop we are retrieving all the key and value that has been stored. WIth localstorage.key() we are retrieving all the keys value and passing it into localstorage.getItem() to retrieve the actual value. That’s all about local storage now I have created some div elements dynamically to make the list look better and done formatting

Now create a file name style.css and paste the following code.

#leftbox{
padding:20px;
width: 95%;
margin: auto;
}
body{
background-color: gray;FF5656
}
#rightbox{
width: 900;
background-color: gray;
margin:auto;
padding:20px;
-webkit-box-shadow: 12px 13px 43px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 13px 43px 3px rgba(0,0,0,0.75);
box-shadow: 12px 13px 43px 3px rgba(0,0,0,0.75);
}

And this is the simple css which needs no explanation.





File structure something like this..


Now copy the code and make it even better as you wish. It was very simple just to help us understand how local storage works.
That’s all folks.

Comments

Popular posts from this blog

What are sales territory in Netsuite?

How to get and set a sublist in netsuite suitlet suitescript 2.0