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

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

Chrome

4+

Edge

12+

Firefox

3.5+

IE

8+

Opera

10.5+

Safari

4+

Mobile browser support

Chrome

18+

Firefox

6+

Opera

11+

Safari

3.2+