HTML5 Local Storage: The Complete Guide

HTML5 Local Storage vs. Cookies

The local storage is a type of HTML5 offline storage that allows user string data to be saved synchronously in their browser. Information is kept in name and value pairs and not available between different browsers on the same device.

If you want to quickly find out if the browser you're currently using supports HTML5 local storage, press F12 and enter this into your browser console:

if(typeof(Storage) !== "undefined") {
  console.log("Local storage is supported.");
  // Local storage is available on your browser
} else {
  console.log("Local storage is not supported.");
  // The condition isn't met, meaning local storage isn't supported
}

Local storage can be used as an alternative to cookies. It provides a chance to store more data: 4KB is the limit for cookies, and local storage allows using up to 10MB, depending on the browser. Moreover, the process is more efficient – the browser does not send any local storage data to the server in any step.

Local Storage Objects

HTML5 local storage keeps the data in two JavaScript objects. Both of them are accessed in the same way and available globally:

localStorage

The JavaScript localStorage object stores data which doesn't expire. It will be available even if you end the session by closing your browser and stay till you delete it manually.

In the code example below, you can see a name and value pair "name", "John" formed in localStorage. Then, the value is retrieved and displayed in an HTML element with an ID of res

// Stores the item data
localStorage.setItem("name", "John");
// Retrieves the data
document.getElementById("res").innerHTML = localStorage.getItem("name");

Here's another way to accomplish the same task:

// Stores the item data
localStorage.name = "John";
// Retrieves the data
document.getElementById("res").innerHTML = localStorage.name;

In this next example, we will be removing the name from the localStorage object:

localStorage.removeItem("name");

The localStorage can also be used to count how many times an element has been clicked throughout multiple sessions in the same browser. See how we use the clicks variable in the code snippet below:

if (sessionStorage.clicks) {
    localStorage.clicks = Number(localStorage.clicks) + 1;
} else {
    localStorage.clicks = 1;
}
document.getElementById("result").innerHTML = sessionStorage.clicks + " click(s).";

sessionStorage

To store data of a currently ongoing session, you can use the sessionStorage object. This data will be removed once the session ends, i.e., the user closes the window or logs out.

Let's see how the sessionStorage object can be used to count how many times an element has been clicked during a single session:

if (sessionStorage.clicks) {
    sessionStorage.clicks = Number(sessionStorage.clicks) + 1;
} else {
    sessionStorage.clicks = 1;
}
document.getElementById("result").innerHTML = sessionStorage.clicks + " click(s) during this session.";

HTML5 Local Storage: Useful Tips

• Just like cookies, HTML5 offline storage shouldn't be used to store sensitive information (e.g., user IDs or payment information). It can be easily accessed by any JS script and compromised in case of a cross-scripting attack.
• When downloading huge files, you may encounter an error called Out of HTML5 Offline Storage Space. If this happens, delete the cookies and the session data using the Settings in your browser, restart your device and try again.
• Web workers cannot use the data kept in local storage in HTML.

Browser support

Mobile browser support