How To Use LocalStorage to Store Data in the Browser
Tags: javascript, webdev, tutorial, beginners
Published: 2020-02-05 00:41:30

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Storing data in a browser is something we do often for web apps. Often, we need to store some temporary data that’s user-specific on the browser. We can do this with the browser’s local-storage capabilities.

With local storage, we store data on the browser as strings. It’s a key value–based storage medium, allowing us to get data by keys and also setting values with the key as the identifier. All data is stored as strings. If a piece of data is not a string, then it’ll be converted to a string before being stored.

Once they’re saved, they’re there as long as we don’t delete the data. We can remove data by its key or remove them all at the same time. Every app that’s hosted on the same domain can access the data, so we can host multiple web apps under the same domain and still get the same data in all the apps.

This means we can easily modularize apps into smaller apps, and we won’t have a problem with browser data access as long as all the apps are hosted in the same domain.

Unlike cookies, local-storage data has no expiration time, so it’ll still be there if we don’t do anything to delete it.

We access the browser’s local storage with the `localStorage` object. It’ll thrown a `SecurityError` if we don’t access `localStorage` with the `http` protocol. This means that any URL starting with protocols like `file:` or `data:` will fail with this error.

* * *

Saving Data
===========

We can use the `setItem` method to save data to a browser’s local storage. It takes two arguments. The first argument is a string with the key of the data, and the second argument is a string with the value of the corresponding key we passed into the first argument.

It throws an exception if the storage is full. Safari has the storage quota set to zero bytes in private mode, but it allows storage in private mode using separate data containers. This means we should catch exceptions from `setItem`.

For example, we can write:

```javascript
localStorage.setItem('foo', 'bar');
```

Then once we run that, we’ll see the entry in the Application tab, under the Local Storage section of Chrome.

We can also write …

```javascript
localStorage.foo = 'bar';
```

… to save data.

Bracket notation also works for assigning values to local storage. For example, we can write …

```javascript
localStorage['foo'] = 'bar';
```

… to set the local storage item with the key `'foo'` and the value `'bar'` .

However, we shouldn’t use the dot or bracket notation instead of `setItem`. We don’t want to accidentally override things like the `setItem` method by setting a string to it, like trying to save data by using `setItem` as the key.

Saving object data
------------------

If we try to save objects, we’ll get `[object Object]` as the value. To actually save the content, we have to use the `JSON.stringify` method. For example, instead of writing …

```javascript
localStorage.setItem('foo', {foo: 'bar'});
```

… we write:

```javascript
localStorage.setItem('foo', JSON.stringify({foo: 'bar'}));
```

Then, we get `{“foo”:”bar”}` as the value for the entry with the `foo` key.

Repeated calling
----------------

If we call the `setItem` method repeated with the same key, then the existing value with the key is overwritten. For example, if we write …

```javascript
localStorage.setItem('foo', 1);  
localStorage.setItem('foo', 2);
```

… then we get `2` as the value for the entry with the key `foo` since it’s the last value that was saved.

* * *

Getting Data
============

We can get data with the `getItem` method or use the dot notation to get data like any other object. `getItem` takes one argument — a string for the key in which we want to get a value with. It returns a string with the value if it’s set for the given key or `null` if it’s not.

For example, we can write:

```javascript
localStorage.getItem('foo');
```

Then, we get the value `'bar'` if we run the `setItem` code from the previous section.

We can also write:

```javascript
localStorage.foo;
```

Alternatively, we can write:

```javascript
localStorage['foo'];
```

The bracket notation is handy for accessing values with corresponding keys that aren’t valid object-property names.

There’s also a `key` method to get the name of the key in the local storage given the position number. It takes one argument, which is an integer that’s zero or higher. The first position is numbered `0`. For example, if we have the following code…

```javascript
localStorage.key(1)
```

… then we get the key name of the second entry in the local storage.

* * *

Removing a Single Entry in Local Storage
========================================

We can remove a single entry from the local storage given the key with the `removeItem` method. It takes one argument, which is a string with the key name of the entry.

For example, if we want to remove the entry with the key `'foo'`, then we can write:

```
loocalStorage.removeItem('foo');
```

The code above will remove the local-storage entry with the key name `'foo'`.

Alternatively, we can use the `delete` operator to remove the item given the key name. For example, we can remove the local-storage entry with the key `'foo'` by running:

```
delete localStorage.foo;
```

We can also use the bracket notation to do the same thing, so we can write …

```javascript
delete localStorage['foo'];
```

… to remove the same entry.

However, we shouldn’t use the dot or bracket notation instead of `setItem`. We don’t want to accidentally override things like the `setItem` method by setting a string to it, like trying to save data by using `setItem` as the key.

* * *

Clearing Local Storage
======================

We can use the `clear()` method to clear all entries in local storage.

We can write …

```javascript
localStorage.clear()
```

… to clear all entries. We shouldn’t see anything in the browser’s local-storage section in the Application tab once we run this method.

* * *

Browser Compatibility
=====================

Local storage is available for almost all modern browsers, so it’s safe to use pretty much anywhere. Even Internet Explorer has had support for it since version 8, so it’s not a new technology. It’s much better than browser-side cookies for persistent data since it doesn’t expire and there are methods to manipulate the data.

With local storage on the browser, storing data client-side is easier than ever. We can do a lot by just calling the methods we outlined above. Whatever is saved is going to be saved as strings. If the data passed into the second argument of the `setItem` isn't a string, then it’ll automatically be converted to a string.