How to Use LocalStorage in 3 Minutes

LocalStorage is a quick and convenient way for developers to locally store data in key/value pairs on a browser. This article will cover the basics of localStorage.

Important: DO NOT store sensitive data in localStorage as the data is easily accessible and there is very little protection.

As I mentioned at the beginning of this article, using localStorage provides a quick and convenient way for developers to locally store data on a browser — whats nice about localStorage is that the data stays in the browser until it is deleted, as opposed to something like sessionStorage which will destroy itself when a tab/window/browser is closed. Each site will have its own localStorage.

One thing to note about localStorage is that the data is stored / retrieved as a string, meaning that you'll need to make use of JSON.stringify / JSON.parse (which will be covered below) if you plan to store arrays or objects in localStorage.

Ways to Use localStorage

Since the data in localStorage should be trivial/simple — an example of how localStorage could be used is to save website preferences — dark mode, currency, language, etc. This way, if someone visits your site and they set these preferences, you could make use the values to ensure that when they visit the site again, those desired preferences are saved.

How to Use localStorage

There are 4 main methods that you'll use when working with localStorage:

• setItem
• getItem
• removeItem
• clear

setItem

We use setItem when we want to add / update a key in localStorage

// We pass in two parameters: (keyName, keyValue)

// Remember -- localStorage only uses strings to store / retrieve its data
//// simple use of localStorage, storing a string 
localStorage.setItem("ourSimpleValue","This is our simple value")

//// converting an array value to a string
localStorage.setItem("ourArray", JSON.stringify(["one","two","three"]))

//// converting an object value to a string
localStorage.setItem("ourObject", JSON.stringify({testKey: "testValue"}))

// If we go to console and do the following:
localsStorage

// We'll see the following:
Storage {ourSimpleValue: "This is our simple value", ourArray: "["one","two","three"]", ourObject: "{"testKey":"testValue"}", length: 3}
length: 3
ourArray: "["one","two","three"]"
ourObject: "{"testKey":"testValue"}"
ourSimpleValue: "This is our simple value"
__proto__: Storage

If we wanted to update ourSimpleValue, its as easy as:

localStorage.setItem("ourSimpleValue","This is our updated simple value")

// Resulting in the following if we type 'localStorage' again:
Storage {ourSimpleValue: "This is our updated simple value", ourArray: "["one","two","three"]", ourObject: "{"testKey":"testValue"}", length: 3}
length: 3
ourArray: "["one","two","three"]"
ourObject: "{"testKey":"testValue"}"
ourSimpleValue: "This is our updated simple value"
__proto__: Storage

getItem

We use getItem when we want to retrieve a value in localStorage

// We pass in the key that we want to retrieve

// Remember -- localStorage only uses strings to store / retrieve its data
//// simple use of localStorage, retrieving a string 
localStorage.getItem("ourSimpleValue")

//// converting an array value to a string on retrieval
JSON.parse(localStorage.getItem("ourArray"))

//// converting an object value to a string on retrieval
JSON.parse(localStorage.getItem("ourObject"))

Without using JSON.parse around our localStorage keys that hold an array or object on retrieval, we would receive our array as a string and lose all functionality of it being an array or object.

removeItem

As mentioned earlier, localStorage will save the key value pairs until it is explicitly destroyed — we can do so by doing the following:

//simply pass in the key you want to remove from localStorage
localStorage.removeItem("ourArray")

// localStorage will now return like so:
Storage {ourSimpleValue: "This is our simple value", ourObject: "{"testKey":"testValue"}", length: 2}
length: 2
ourObject: "{"testKey":"testValue"}"
ourSimpleValue: "This is our simple value"
__proto__: Storage

clear

If you want to be more ruthless, you can destroy all of the stored key/value pairs like so:

localStorage.clear()

// localStorage will now return like so:
Storage {length: 0}
length: 0
__proto__: Storage

If you want to view the localStorage of a particular site (outside of viewing it in console), all you need to do is:

1. Open DevTools
2. Click Application
3. Click Local Storage
4. Click on the site whose localStorage you'd like to view

As always, refer to the docs for more info:

localStorage

Feel free to reach out here or on my socials for any questions, suggestions, or to say hello 👋