Using LocalStorage to Persist Data

Making an app that requires persisting some simple but non-sensitive data? Do you want to cache some data to help your app run faster when a user returns? Using web storage can make that extremely simple if the data being stored doesn't need security.

There are two types of web storage objects:

• localStorage (no specified expiration and will persist after the window closes)
• sessionStorage (cleared when the browser window is closed)

I will only be diving into localStorage for this blog. More info on how web storage data is stored as well as browser compatibility.

Note on Security

While web storage can be very convenient, never store sensitive user information using web storage. No data protection measures are in place for localStorage. Keep in mind that localStorage is compatible with most browsers, but not all, so make sure your app doesn’t rely on localStorage to run. Here is another blog post going more in-depth about why and when using localStorage can be dangerous.

What is localStorage exactly?

The localStorage is just a JS object. If you open up dev tools and type localStorage into the console, you should get back a JS object. If the length is greater than 0, there is information stored there by the page you are currently on. When I looked at localStorage for dev.to, there is actually a ‘current_user’ key that has a lot of my info saved under it like id, username, profile_image, etc. You can visit any webpage you like and see if and how that page uses localStorage.

The localStorage object has a few methods we can make use of:

1. localStorage.clear()
2. localStorage.setItem(key, value)
3. localStoage.getItem(key)
4. localStorage.removeItem(key)
5. localStorage.key(index)

Note: sessionStorage has the exact same methods.

.clear()

To start playing around with localStorage in the browser, we can start with a clean slate by running localStorage.clear().

This removes all items saved to localStorage at this domain.

.setItem()

Now let's add an key-value pair to localStorage:

In this example, we are going to be storing a simple grocery list.

.getItem()

Let's see if our data is saved properly by using the getItem method.

Our data was saved, but the array was converted to a string in a way we didn't intend. To fix this, we can use JSON.stringify() and JSON.parse() in order to convert our array into a string for localStorage and back to an array once we retrieve it.

.removeItem()

To remove our key-value pair, we just need to use the removeItem method.

.key()

The only other method available to us it localStorage.key(index). This method returns the key of an item when passed an index. This could be useful if you had to loop through the data you stored in localStorage and pass in an index.

Play Around!

Since localStorage is easy to access in dev tools, I would highly recommend going to some of your favorite sites and seeing if/how they use localStorage and sessionStorage. This may help you get ideas on when you might use it and get insight into the security of different websites.