What is localStorage?

Full article can be found here.

LocalStorage is a web storage which allows you to store and access data as key:value pairs inside a Web Browser using JavaScript. Data stored with localStorage is permanent and stays forever unless deleted manually or programmatically .

In this article we will look at the five (5) methods available when using local storage, the benefits of localStorage and things to consider when using it.

Methods

As mentioned above, you have five (5) methods available when working with localStorage. These are:

• setItem() - saves a key:value pair to localStorage
• getItem() - retrieve an item in localStorage via a key
• removeItem() - deletes the item for the given key
• clear() - deletes all items
• key() - returns the key at the given index

Before we look at each method, it is important to understand that the localStorage operated on will be the current domain from which the methods are executed.

setItem(key, value)

You use the setItem method to store new data inside localStorage. It accepts a key and a value.

localStorage.setItem('school', 'University of Technology, Jamaica');

The above code will create a key named school and store it with the value university of Technology, Jamaica.

Storing Objects in localStorage

It's important to note that localStorage can only store string values. If we want to store an object, we have to first convert it to a string value. We do so using the JSON.stringify() method.

// Create user object

let user = {
  name: 'Taslan Graham',
  nationality: 'Jamaican'
};

localStorage.setItem('user', JSON.stringify(user)); // Stores user as JSON string

The above will convert the user object to "{"name":"Taslan Graham","nationality":"Jamaican"}" and store it.

getItem(key)

The getItem() method accepts a key and returns its value.

localStorage.getItem('school');

This will return 'University of Technology, Jamaica'.

We can also retrieve the user item stored earlier.

let user = localStorage.getItem('user');

This returns "{"name":"Taslan Graham","nationality":"Jamaican"}". We can convert this JSON string value back into a JavaScript object.

JSON.parse(user); // {name: "Taslan Graham", nationality: "Jamaican"}

removeItem(key)

The removeItem method accepts a key and deletes it from localStorage, if it exists.

localStorage.removeItem('school');

clear()

The clear method will delete all data inside localStorage for the domain.

localStorage.clear();

key()

The key method accepts a number(n) and returns the nth key inside in the localStorage object;

localStorage.key(0)

The above code would return the first key inside localStorage.

The key method can be useful when we want to access each key inside localStorage without knowing their names.

for(const i = 0; i < localStorage.length; i++){
  const key = localStorage.key(i);
  console.log(localStorage.getItem(key);
}

In the above code, we start looping at zero and for each iteration we use the value of i to retrieve the key at that position inside localStorage; we store the key inside the key variable. We then log the value of the current key to the console.

Benefits of localStorage

localStorage provides some very interesting benefits. These includes:

1. localStorage is supported by the major modern browsers.

This means you can use it within your app without worries.

But, if you want to ensure that the user's browser supports localStorage, you can do the following.

if (typeof(Storage) !== "undefined") {
    // Write code for localStorage here
    } else {
     // No localStorage support
    // Do something else
}

2. Can be used for simple caching

Most browsers provides up to 10MB for web storage. This means you could use localStorage for caching data which rarely changes and is accessed often throughout your application.

3. The data can be accessed easily and quickly

You can retrieve data without making a network call.

Things to consider

When using localStorage there a couple of things to take into consider. Well, they are more like thing not to do when using localStorage.

1. Don't store sensitive data in localStorage

There's no security associated with localStorage. Anyone can view the data. Therefore , it is not suitable for storing sensitive information such as user passwords.

2. You may still need an actual database

The data stored is localized to the user's browser and is only accessible there. Therefore localStorage is not a substitute for a database.

In this article we covered localStorage, and the methods available when working with it. Additionally, we looked at some benefits of localStorage as well as some things to take into consideration when using localStorage.

If you enjoy this article, leave a comment about what was most valuable to you. Also share with friends who might find it useful.

Until next time, Think, Learn, Create, Repeat!