Nosa Obaseki Front-end Dev currently building amazing products @theflutterwave 🐼🇳🇬

The complete guide to using localStorage in JavaScript apps

2 min read 566

A guide to using localStorage in JavaScript apps.

localStorage is a type of web storage that allows JavaScript sites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window has been closed.

localStorage in JavaScript: How to

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

  1. setItem(): Add key and value to localStorage
  2. getItem(): Retrieve a value by the key from localStorage
  3. removeItem(): Remove an item by key from localStorage
  4. clear(): Clear all localStorage
  5. key(): Passed a number to retrieve nth key of a 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().

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

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


The getItem() method allows you to access the data stored in the browser’s localStorage object.

It accepts only one parameter which is the key and returns the value as a string.

To retrieve the user key stored above:

We made a custom demo for .
No really. Click here to check it out.


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.



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



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



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

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.

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Debug JavaScript errors easier 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!

    Nosa Obaseki Front-end Dev currently building amazing products @theflutterwave 🐼🇳🇬

    6 Replies to “The complete guide to using localStorage in JavaScript apps”

    1. Thanks you so much, actually I was storing my object values without converting them to string, and my logic was not working as expected, your post helped me alot

    2. This is the kind of content I like. I’m referring one of my students to this page because they want to design a simple web interface that tracks days since [insert event].

    3. Thanks! This really helped me.
      Can you suggest any blog. I want to convert my web pages into PWAs.

    Leave a Reply