Image Source

What is localStorage?

It’s a property in your browser that allows you to store and save data across multiple browser sessions without an expiration. It’s like an external memory you can utilize for small features on a project.

We say small feature because the only data type you’re allowed to store in localStorage are strings.

Syntax

It’s an object that takes in a key-value pair when storing data.

Storing Data

Using the dot-notation syntax, here we’re setting localStorage a key of “poop” to a value of “beef”.

Another syntax you could also use is the localStorage.setItem(key, value). With this syntax, we’re using the .setItem() method, passing in two parameters. The first argument is the key to accessing the data and the second is the value or the data you want to store.

Accessing Data

Once again, using dot notation you can access your data with the above syntax. The alternate would be to use the .getItem() method as shown below.

You can also set a variable to the method call and access it that way.

Removing Data

There isn’t a dot notation for removing data but there is the .removeItem() method we can use! This method takes in the key of the data you want to remove.

As for clearing your entire localStorage, there’s the .clear() method.

Resources:

Window.localStorage

HTML5 Web Storage

while(true){ learn }

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store