localStorage and sessionStorage with JavaScript

localStorage and sessionStorage are useful tools that are part of the Web Storage API, allowing you to save strings and key/value pairs locally.  Each item within localStorage and sessionStorage 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 better and most useful features added to most modern browsers to date. Dealing with accessing and storing cookie data can be a pain. And 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. localStorage and sessionStorage have all of the functions ready 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 have the same API and are almost identical in every way, except sessionStorage data persists only until the browser window or tab is closed.  localStorage data persists until the user manually clears the browser cache or until the website or web application clears the data.

Since both localStorage and sessionStorage use the same set of Web Storage API functions, all examples will be for localStorage.  Just note that the same syntax can be used for sessionStorage in all instances.

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 JSON.parse() and JSON.stringify() with JavaScript 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