Local Storage
Published: 2021-01-27 21:23:26

---
title: Local Storage
published: true
date: 2020-04-11 23:32:51 UTC
tags: 
canonical_url: https://dberri.com/local-storage-2
---

With more logic and data manipulation brought to the frontend, some data storage problems start to arise. Among them, storing data betwen page reloads or sessions. This is a very common problem in SPAs (Single Page Applications), where you may have several data manipulations happening in between page reloads or would have to keep downloading the same data over and over from the server. There are cases where it's possible to minimize the user's wait time displaying info that is stored right in the browser using LocalStorage.

LocalStorage is a type of web storage that allows JavaScript applications to access data stored in the browser with no expiration date.

This functionality is available in the `window` object and you can access it like this:

```js
const myStorage = window.localStorage
// or
const myStorage = localStorage

```

This will return a [Storage](https://developer.mozilla.org/docs/Web/API/Storage) object. This object has the property `length` that returns an integer representing the quantity of items stored in the object and it also has the following methods:

- setItem
- getItem
- key
- removeItem
- clear

## setItem

It accepts the parameters _key_ and _value_ that will be stored (or updated if that particular key already has some data associated):

```js
myStorage.setItem(“name”, “David”)

```

In this case, "name" is the _key_ and "David" is the _value_.

> Important: If you want to store arrays or objects - something that will probably be more common in an application - first you will have to transform them into strings, using, for instance, JSON's `stringify` method:

```js
const myBrowser = {
  name: “Chrome”,
  openTabs: 3,
  consumedMemory: 512e9
}

myStorage.setItem(“browser”, JSON.stringify(myBrowser))

```

## getItem

You pass the _key_ to this method and it returns what you stored with that key, or _null_ if it does not find anything associated.

```js
myStorage.getItem(“name”)

// expected output
// “David”

```

If you stored an object or array like in the previous example, you will notice that `getItem` returns a string representation of the object, so you should use JSON's `parse` method to turn it into a "real" object again:

```js
const myBrowser = myStorage.setItem(“browser”)
console.log(myBrowser)

// expected ouput
// “{\”name\":\"Chrome\",\"openTabs\":3,\"consumedMemory\":512000000000}"

console.log(JSON.parse(myBrowser))

// expected output
// {
// name: "Chrome",
// openTabs: 3,
// consumedMemory: 512000000000
// }

```

## key

This method accepts an integer as a parameter and with that, it returns a key if it is stored in that position or _null_ if there's nothing there. It works more or less like accessing positions in an array. In our examples, we had stored two items in LocalStorage: _name_ and _browser_:

```js
const position0 = myStorage.key(0)
const position1 = myStorage.key(1)
const position2 = myStorage.key(2)

console.log(`${position0}, ${position1}, ${position2}`)

// expected output
// name, browser, null

```

This method is useful if you need to iterate over the keys inside a loop, for instance.

## removeItem

You pass a _key_ to this method and it removes the associated value:

```js
myStorage.removeItem(“name”)

```

Now,  `getItem(“name”)`, will return _null_ and `key(0)` becomes: “browser”.

## clear

Last but not least, we have the method `clear` which completely clears the application's LocalStorage, removing all of its keys.

```js
myStorage.clear()
console.log(myStorage.length)

// expected output
// 0

```

## Limitations

It's important to note that:

- You should not store sensitive information or user data in LocalStorage
- It is not a replacement for traditional databases, since data is only available in the browser
- It has a 5mb limit in most browsers

With this introduction to LocalStorage, you will surely be able to create more powerful applications. I hope this has inspired you to use it in your apps and if you want an example to start, take a look [here](https://github.com/dberri/todo-vue/blob/master/src/store/index.js) in my GitHub. It's a very simple task manager written in Vue.js and uses LocalStorage to persist data.