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);
That’s all folks.
