Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

HTML5 Local Storage: The Complete Guide

Reading time 3 min
Published Mar 27, 2019
Updated Sep 30, 2019

TL;DR – HTML5 local storage is an alternative to cookies, allowing web applications to store user information in their browser.

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:

Example
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:

Object Available to Lifetime
localStorage All windows or tabs using the same domain Permanent
sessionStorage A particular window or tab and its popups Till the end of the session

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

Example
// 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:

Example
// 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:

Example
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:

Example
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:

Example
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

Browser image
Chrome
4+
Browser image
Edge
12+
Browser image
Firefox
3.5+
Browser image
IE
8+
Browser image
Opera
10.5+
Browser image
Safari
4+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
6+
Browser image
Opera
11+
Browser image
Safari
3.2+