HTML5 Local Storage
HTML local storage, better than
cookies.
HTML5 Local Storage
• With local storage, web applications can store data locally
within the user's browser.
• Before HTML5, application data had to be stored in cookies,
included in every server request.
• Local storage is more secure, and large amounts of data can
be stored locally, without affecting website performance.
• Unlike cookies, the storage limit is far larger (at least 5MB)
and information is never transferred to the server.
• Local storage is per origin (per domain and protocol).
• All pages, from one origin, can store and access the same
data.
HTML Local Storage Objects
• HTML local storage provides two objects for
storing data on the client:
1. window.localStorage - stores data with no
expiration date
2. window.sessionStorage - stores data for one
session (data is lost when the browser tab is
closed)
HTML Local Storage Objects
• Before using local storage, check browser
support for localStorage and sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
The localStorage Object
• The localStorage object stores the data with no
expiration date.
• The data will not be deleted when the browser is
closed, and will be available the next day, week,
or year.
• // Store
localStorage.setItem("lastname", “Abhigyan");
• // Retrieve
document.getElementById("result").innerHTML
= localStorage.getItem("lastname");
The localStorage Object
if (localStorage.clickcount) {
localStorage.clickcount =
Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML =
"You have clicked the button " +
localStorage.clickcount + " time(s).";
The sessionStorage Object
• The sessionStorage object is equal to the
localStorage object, except that it stores the
data for only one session.
• The data is deleted when the user closes the
specific browser tab.
• Example