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:

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 …

localStorage.foo = 'bar';

… to save data.

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

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 …

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

… we write:

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 …

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:

localStorage.getItem('foo');

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

We can also write:

localStorage.foo;

Alternatively, we can write:

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…

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 …

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 …

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.