localStorage in JavaScript: A complete guide

Editor’s note: This post was updated on 29 December 2020.

In this tutorial, we’ll show you how to use the localStorage mechanism and Window.localStorage property and review the basics of web storage in JavaScript.

We’ll cover the following in detail:

• What is the Web Storage API?
• What is the difference between sessionStorage and localStorage?
• What is localStorage in JavaScript?
• Where is localStorage stored?
• What is Window.localStorage?
• How does localStorage work?
  • setItem(): How to store values in localStorage
  • getItem(): How to get items from localStorage
  • removeItem(): How to delete localStorage sessions
  • clear(): How to delete all items in localStorage
  • key(): How to get the name of a key in localStorage
• localStorage browser support
• localStorage limitations

What is the Web Storage API?

The Web Storage API is a set of mechanisms that enable browsers to store key-value pairs. It is designed to be much more intuitive than using cookies.

The key-value pairs represent storage objects, which are similar to objects except they remain intact during page loads, and are always strings. You can access these values like an object or using the getItem() method (more on that later).

What is the difference between sessionStorage and localStorage?

The Web Storage API consists of two mechanisms: sessionStorage and localStorage. Both sessionStorage and localStorage maintain a separate storage area for each available origin for the duration of the page session.

The main difference between sessionStorage and localStorage is that sessionStorage only maintains a storage area while the browser is open (including when the page reloads or restores) while localStorage continues to store data after the browser is closed. In other words, whereas data stored in sessionStorage is cleared when the page is closed, data stored in localStorage does not expire.

In this tutorial, we’ll focus on how to use localStorage in JavaScript.

What is localStorage in JavaScript?

localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.

For a visual refresher on how to use localStorage in JavaScript, check out the video tutorial below:

Where is localStorage stored?

In Google Chrome, web storage data is saved in an SQLite file in a subfolder in the user’s profile. The subfolder is located at \AppData\Local\Google\Chrome\User Data\Default\Local Storage on Windows machines and ~/Library/Application Support/Google/Chrome/Default/Local Storage on macOS

Firefox saves storage objects in an SQLite file called webappsstore.sqlite, which is also located in the user’s profile folder.

What is Window.localStorage?

The localStorage mechanism is available via the Window.localStorage property. Window.localStorage is part of the Window interface in JavaScript, which represents a window containing a DOM document.

The Window interface features a wide range of functions, constructors, objects, and namespaces. Window.localStorage is a read-only property that returns a reference to the local storage object used to store data that is only accessible to the origin that created it.

How does localStorage work?

To use localStorage in your web applications, there are five methods to choose from:

1. setItem(): Add key and value to localStorage
2. getItem(): This is how you get items from localStorage
3. removeItem(): Remove an item by key from localStorage
4. clear(): Clear all localStorage
5. key(): Passed a number to retrieve the key of a localStorage

setItem(): How to store values in localStorage

Just as the name implies, this method allows you to store values in the localStorage object.

It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached to it.

window.localStorage.setItem('name', 'Obaseki Nosa');

Where name is the key and Obaseki Nosa is the value. Also note that localStorage can only store strings.

To store arrays or objects, you would have to convert them to strings.

To do this, we use the JSON.stringify() method before passing to setItem().

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem('user', JSON.stringify(person));

getItem(): How to get items from localStorage

To get items from localStorage, use the getItem() method. getItem() allows you to access the data stored in the browser’s localStorage object.

getItem() accepts only one parameter, which is the key, and returns the value as a string.

To retrieve a user key:

window.localStorage.getItem('user');

This returns a string with value as:

“{“name”:”Obaseki Nosa”,”location”:”Lagos”}”

To use this value, you would have to convert it back to an object.

To do this, we make use of the JSON.parse() method, which converts a JSON string into a JavaScript object.

JSON.parse(window.localStorage.getItem('user'));

removeItem(): How to delete localStorage sessions

To delete local storage sessions, use the removeItem() method.

When passed a key name, the removeItem() method removes that key from the storage if it exists. If there is no item associated with the given key, this method will do nothing.

window.localStorage.removeItem('name');

clear(): How to delete all items in localStorage

Use the clear() method to delete all items in localStorage.

This method, when invoked, clears the entire storage of all records for that domain. It does not receive any parameters.

window.localStorage.clear();

key(): How to get the name of a key in localStorage

The key() method comes in handy in situations where you need to loop through keys and allows you to pass a number or index to localStorage to retrieve the name of the key.

var KeyName = window.localStorage.key(index);

localStorage browser support

localStorage as a type of web storage is an HTML5 specification. It is supported by major browsers including IE8. To be sure the browser supports localStorage, you can check using the following snippet:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage
    } else {
    // No web storage Support.
}

localStorage limitations

As easy as it is to use localStorage, it is also easy to misuse it. The following are limitations, and also ways to NOT use localStorage:

• Do not store sensitive user information in localStorage
• It is not a substitute for a server based database as information is only stored on the browser
• localStorage is limited to 5MB across all major browsers
• localStorage is quite insecure as it has no form of data protection and can be accessed by any code on your web page
• localStorage is synchronous, meaning each operation called would only execute one after the other

With these, we have been armed with the power of localStorage in our web applications.

LogRocket: Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free.