HTML5 localStorage

Store information locally in user browser using HTML5 local storage, same like cookies. HTML5 local storage is secure and store large amount of data's.

There are two objects of data storing in HTML local storage.

The localStorage Object:

The localStorage data doesn't have expiration date. Data will not loose from browser until you delete data manually, clear cache or browser file system.

// Set the value in localStorage
localStorage.setItem("firstname", "shanid");

// get the value from localStorage
var fname = localStorage.getItem("firstname");
document.getElementById("output").innerHTML = fname;

In this above example I just stored static value in localStorage. You can store dynamic values, like form inputs, updated contents etc.

The sessionStorage Object

The localStorage data deleted when the user close the browser.

// Set the value in sessionStorage
sessionStorage.setItem("firstname", "Shanid");

// get the value from sessionStorage
var fname = sessionStorage.getItem("firstname");
document.getElementById("output").innerHTML = fname;

Example: