Local storage allows a user to store data in the device’s browser. It is a part of the HTML5 Web Storage API. Unlike cookies, information stored by the user using HTML5 local storage is never transferred to the server. All data stored stays on the client, and you can store anywhere from 2MB to 10MB. The storage limit actually depends on the browser, port, protocol (HTTP or HTTPS), and top level domain you use.

In this article, we will discuss how to use HTML5 local storage API to improve the performance of your website.

Available disk space

An overview of the available disk spaces in popular mobile and desktop browsers:

Mobile browsers:
Browser Chrome Android Browser M Firefox iOS Safari
Version 40 4.3 34 6-8
Space available 10MB 2MB 10MB 5MB

Desktop browsers:
Browser Chrome Opera Mini Firefox Safari Internet Explorer
Version 40 27 34 6-8 9-11
Space available 10MB 10MB 10MB 5MB 10MB

 

Important points to be remember while using Local Storage API:

  • Naming HTML5 LOCAL STORAGE keys needs unique ids and there are no naming conventions available for it.
  • The problem with HTML5 local storage API can be explained with a simple example. Suppose you have one domain say xyz.com and it has two applications or can say two pages P1 and P2;
    P1 can access localStorage items set by P2 and vice versa, because both pages have same domain. Therfore you need to choose a naming scheme for your local storage that should be unique so that it won’t conflict with other applications/pages at the same domain.
  • Use JSON.stringify if you want to store arrays or objects/files into local storage and JSON.parse to retrieve the value.

A note on "private browsing"

It is found that under the tab known issues, when using a browser in incognito mode, Safari, iOS Safari, and some Android browsers do not support setting files in local storage.

While some browsers like Google Chrome and Mozilla Firefox allow users to store data in local storage in incognito mode, but the data get removed when you exit private mode. This is to protect your data as someone might use the persistent data to know about your actions when in private mode.

So, in order to use local storage safely, it is better to test for support & also for the capacity to get and set items.

HTML local storage objects

HTML5 local storage provides two objects to user for storing information:

  • window.localStorage – It stores data with no expiration date
  • window.sessionStorage – It stores data for current session (data get lost on closing the browser tab)

Before using HTML local storage, check if your browser supports 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 on the client with no expiration date. The stored data will not be deleted even on closing the browser, and will be available the next hour, week, or year.

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Example form above explained:

  • Create a localStorage value/name pair with name="lastname" & value="Smith"
  • Retrieve the value of "lastname" and insert it into the element with id="result"

The above example could also be written like this:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

Use following syntax for removing the "lastname" localStorage item:

localStorage.removeItem("lastname");

Note: Name/value pairs are always stored on the client's machine as strings. Convert them to another format before using!

The example given below shows the number of times a client has clicked the same button. In the following code the value string is converted to a number to be able to increase the counter:

Example of 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 almost equal to the object localStorage, except that, the data stored by sessionStorage will be available for only one session and the data gets deleted when the user closes the specific browser tab.

The following example shows the number of times a client has clicked a button, in the current session:

Example of sessionStorage object:

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.";

Example

Example of local storage with one session only:

 

›› go to examples ››