HTML local storage, better than cookies.
What is HTML Local Storage?
Using local storage, web applications has the capacity to store data locally inside the user's browser.
Before the launch of HTML5, application data needs to be stored in cookies, which was included in every server request. Local storage is considered to be more secure, and huge amounts of data can be stored locally, without hindering website performance.
The storage limit is far larger (at least 5MB) than cookies and information is not transferred to the server.
Local storage is done per origin (per domain and protocol). All pages, right from one the origin, can store and connect to the same data.
Browser Support
The table numbers specify the first browser version which fully supports Local Storage.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Local Storage Objects
HTML local storage will provide two objects to store data on the client:
Before starting the usage of local storage, checking browser support for localStorage and sessionStorage is necessary:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
The localStorage Object
The localStorage object is used to store the data without expiration date. The data is not deleted even after the browser gets closed, and is available the next day, week, or year.
Example
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Try it Yourself
Example explained:
The example above can also be written similar to this:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
The syntax for removing the "lastname" localStorage item is given below:
localStorage.removeItem("lastname");
Note: Name/value pairs are always getting stored as strings. You should remember to convert to another format when required!
The following example is used to count the number of times a user is clicking on a button. In this given code the value string gets converted to a number for increasing the counter:
Example
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).";
Try it Yourself
The sessionStorage Object
The sessionStorage object is having equal value similar to the localStorage object, except that it is storing the data for only one session. The data will be deleted when the user is closing the specific browser tab.
The example given below is used to count the number of times a user is clicking a button, in the current session:
Example
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Try it Yourself