HTML5 Local Storage: Learn About HTML5 Offline Storage

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

Contents

• 1. HTML5 Local Storage vs. Cookies
• 2. Local Storage Objects
• 2.1. localStorage
• 2.2. sessionStorage
• 3. HTML5 Local Storage: Useful Tips
• 4. Browser support

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 Copy 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 } Try it Live Learn on Udacity

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 Copy // Stores the item data localStorage.setItem("name", "John"); // Retrieves the data document.getElementById("res").innerHTML = localStorage.getItem("name"); Try it Live Learn on Udacity

Here's another way to accomplish the same task:

Example Copy // Stores the item data localStorage.name = "John"; // Retrieves the data document.getElementById("res").innerHTML = localStorage.name; Try it Live Learn on Udacity

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

Example Copy localStorage.removeItem("name"); Try it Live Learn on Udacity

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 Copy if (sessionStorage.clicks) { localStorage.clicks = Number(localStorage.clicks) + 1; } else { localStorage.clicks = 1; } document.getElementById("result").innerHTML = sessionStorage.clicks + " click(s)."; Try it Live Learn on Udacity

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 50% 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:

Example Copy if (sessionStorage.clicks) { sessionStorage.clicks = Number(sessionStorage.clicks) + 1; } else { sessionStorage.clicks = 1; } document.getElementById("result").innerHTML = sessionStorage.clicks + " click(s) during this session."; Try it Live Learn on Udacity

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+