LocalStorage:-This is one of the many awesome features provided by HTML5 to store the data locally on the machine. Many of us have already heared about it but do not know how to use it. So here i am mentioning the common questions first arises when discussing localStorage.
Q:-What is HTML5 LocalStorage?
Ans:- Local storage is a client side key-value database, it stored in the client side browser. It is one of the specification in the W3C draft .It supports only the storage of string type. It is different from other databases. We fetch the data from localStorage on the basis of key-value pair.
Q:-How It is different from Cookies and sessions?
Ans:- The data stored in localStorage is still there even after the browser is closed and is shared across multiple windows. We don’t have to worry about a user deleting the cookies and all their data.
Q:-Which browser supports this properties?
Ans:- LocalStorage is supported by most modern browsers including Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+.
Q:- How to use localStorage in our Web-application?
Ans:-Localstorage can be implemented by javascript/jQuery.Like
localStorage.setItem("name", "Hello World!");
//saves to the database, key/value setItem() is used to set the values in key-value pair
document.write(localStorage.getItem("name"));
//getItem() method is used to retrieve the content from key-value pair
localStorage.removeItem("name");//Remove the content from database
I have created an example to explain this feature.
HTML
My To-Do List
Click below and write your to do items
Created By Subodh Kant Mishra
Javascript code
$(document).ready(function() {
//if browser does not support this feature give a alert message
if (typeof (localStorage) == 'undefined') {
alert("Your browser doesnot support HTML5 local storage")
}
else {
var edit = document.getElementById("edit");
$(edit).blur(function() {
try {
localStorage.setItem("toDoList", this.innerHTML); //Set the key-value pair
}
catch (e) {
//if the memory is full show a alert message
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!');
}
}
});
if (localStorage.getItem("toDoList")) {
edit.innerHTML = localStorage.getItem("toDoList");//Get the value from storage area
}
}
});