localStorage vs. sessionStorage & Web Storage API

JavaScript's localStorage and sessionStorage are part of the Web Storage API, allowing you to save strings and key/value pairs locally.  Each item within one of these storage types can be easily accessed within your browser or web application using a set of API functions.

I don't know about you, but this is probably one of the most useful features added to most modern browsers to date. Accessing and storing cookie data can be a pain. But with localStorage and sessionStorage, you don't have to go to far lengths of parsing and manipulating data to get what you're looking for.

This article covers JavaScript's localStorage and sessionStorage capabilities, their differences, and all of the functions readily available for you to read, write, and remove data as you please.

Important Note:  localStorage and sessionStorage should not be used as a replacement for cookies in all circumstances.  Or in any circumstance if you prefer using cookies.  However, cookies should still be your go-to method in cases where you need to store sensitive, secure data, such as user info or JSON Web Tokens.

Read the article Working With Cookies in JavaScript - The Ultimate Guide for more information about web browser cookie creation and management with JavaScript.

localStorage vs. sessionStorage

localStorage and sessionStorage both extend the Web Storage API and are almost identical in every way.  The key difference is that sessionStorage data persists only until the browser window or tab is closed.  localStorage data persists until explicitly deleted, meaning the user manually cleared the browser cache or the website or web application cleared the data.

Since both localStorage and sessionStorage function off the same set of Web Storage API methods, all examples will be for localStorage.  Just note that the same syntax can be used for sessionStorage in all instances that we'll cover.

Checking for Support

Even though most modern browsers support localStorage today, it's still good practice to check for support before using it. You can do so like this:

if (window.localStorage) {
	// localStorage supported
}

Creating Entries

You can create key/value pair entries using localStorage.setItem by providing the key data and value associated with the key:

var key = "My Key";
localStorage.setItem(key, "My Value");

Note: localStorage.setItem both create a new entry or update an existing entry, so the same approach can be used in both scenarios.

Reading Entries

Then you can easily access the entry with localStorage.getItem:

var my_item = localStorage.getItem(key);

Deleting Entries

You can delete an entry with localStorage.removeItem:

localStorage.removeItem(key);

Clearing All Entries

And here's how you would clear all items stored in localStorage:

localStorage.clear();

Looping Through All Entries

If you want to access all of your available localStorage data, you can do so by looping over the data the same way you would as an array:

for (var i = 0; i < localStorage.length; i++) {
	var key = localStorage.key(i);
	var value = localStorage.getItem(key);
	
	console.log(key, value);
}

Working with JSON Objects and Strings

The most effective way of working with localStorage (in my eyes) is by storing complex objects and data as JSON strings with the JSON.stringify() method and then using the JSON.parse() method to read them.

Here, we'll create the object and convert that object into a JSON string which is then saved to localStorage:

// Create JSON localStorage entry:
var my_obj = {
	name: "Josh",
	age: 30,
	about: "I love coding!"
};

localStorage.setItem(key, JSON.stringify(my_obj));

Then you can access that data easily by parsing the saved data from localStorage back into a variable:

var my_obj = JSON.parse(localStorage.getItem(key));

console.log(my_obj.name);
// Josh

Pretty nifty, right?! The reason why we have to go through the process of converting the object to a string before saving it to localStorage is because only strings can be saved in localStorage. Complex objects, arrays, functions, etc. cannot be stored into localStorage unless first converted to a string.

Read more on the JavaScript JSON.parse() and JSON.stringify() methods here

Other Useful Tidbits

• They're simple to use and the syntax is very straightforward.
• You can pack in a lot of data (10 Mb for most browsers).
• The data is only saved locally and cannot be accessed by the server, eliminating the security issues that cookies present.
• localStorage is available in all modern desktop and mobile browsers.

Browser Support