Basics of Local Storage

Early on in my Software Engineering career, one of the first questions I had was how to store data on the client's computer for future use. This data will only be available in the browser you are currently working in and can be readily accessed when the page is reloaded. At this stage in my learning, I hadn't yet had any access to backend programming and didn't know how to accomplish this. This is where Local Storage comes in.

What is Local Storage?

Local storage is a key/value database that is available on a user's browser. This database can be persisted for an indefinite amount of time or until it is manually deleted. Local storage currently only accepts strings so if you are storing an array or object you are going to need to use JSON.stringify() on it first to convert it into a string.

When Not To Use Local Storage?

Although Local Storage has many uses, it is important to not save any sensitive information. This includes passwords, API keys, authentication tokens, etc. Malicious third-parties can easily access this information and use it to their own gain.

When To Use Local Storage?

As mentioned earlier, Local Storage gives you persistence on your website. It is used to store information that the site should still be able to have even if it is refreshed. This is commonly done to save user preferences like UI themes. Local storage can also be used to save game statistics. A recent example is the popular game Wordle. Every day you play the game it saves items like the amount of guesses, your current win streak, and the win percentage. If you were to try and open the game in another browser or computer, you would find that all of your statistics would be gone.

Another Example

Let's take a look at an example with Dev.to. Visitors of the website who have a profile are able to change appearance settings like site theme and font. If we were to open up the browser developer tools we can take a look at what is currently saved in developer tools.

Above we can see that the browser currently has several keys saved inside of Local Storage. Inside of the config_body_class key, there is a value of dark-theme and sans-serif. If one were to change the theme and the font in the settings, this change would be reflected in the config_body_class key and would be persisted upon page reload.

Local Storage Methods

localStorage.key(index)

This method can be used to retrieve a value at a specific index. Passing in an index number will return all of the values at that specific index.

let key = localStorage.key(0)
//This will get the value of the first item in localStorage

localStorage.setItem(key, value)

This allows you to save a key/value pair to your browser.

localStorage.setItem("key", "value")
//This will add a key called "key" 
//with a value of "value" to localStorage

To add something other than a string, you can use the following syntax

const movies = [
  "Star Wars",
  "Lord of the Rings",
  "Harry Potter"]

localStorage.setItem("key", JSON.stringify((movies)))

localStorage.getItem(key)

This will read the data from local storage for the specified key. If the key doesn't exist, it will return null.

localStorage.getItem("key")
//To retrieve a specific key from
//local storage, you can pass in the key 
//as a variable into getItem

To retrieve a key with a value other than a string, you will need to parse it first with the following syntax.

JSON.parse(localStorage.getItem("key"))

localStorage.removeItem(key)

This method will remove the specified key from localStorage. If the specified key does not exist then the method will return undefined.

localStorage.clear()

This method takes in no parameters and will simply remove all keys from localStorage. These keys will need to be added again if they are to be accessed again.

Conclusion

Local storage is a database of key/value pairs that is accessible inside of the browser. It is very important to not store any sensitive data inside of LocalStorage. When storing objects inside of LocalStorage you need to remember to convert it to a string using JSON.stringify(). You can retrieve this object using JSON.parse(). The possibilities are endless with LocalStorage.

What are some ways that you might use LocalStorage in a future project?