How to Use LocalStorage in 3 Minutes
Tags: javascript, tutorial, html
Published: 2021-02-17 15:09:00

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](https://developer.mozilla.org/en-US/docs/Web/API/Window/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) / [JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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

```jsx
// 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:

```jsx
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

```jsx
// 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:

```jsx
//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:

```jsx
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](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)

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