Using Local Storage

You previously learned that local storage is built right into the browser. It's part of the browser's Web Storage API, which provides tools for browsers to store key/value pairs. Local storage offers a lot of flexibility: you can store, retrieve and delete data using local storage methods like setItem, getItem, and removeItem.

Access Local Storage with the localStorage property

The localStorage property allows access to the browser's storage object to store, update, and delete data across browser sessions. We can access local storage with the keyword localStorage, which represents a Storage object where browser data is stored as key/value pairs:

Storage {
  keyName : keyValue;
}

The key is the name of the item to be stored and must be assigned a string value (remember, local storage only stores data in string format). If you need to store other data types like objects or arrays in local storage, you need to convert them to a string using JSON.Stringify(). You'll learn more about this in the next step.

Store Items in Local Storage with setItem

Local storage can be defined, retrieved and deleted with it’s own built-in methods. Let's start with setItem(), which sets a property on the local storage object. It takes two parameters, the key and value of the item you would like to create:

localStorage.setItem('keyName', 'keyValue')

Retrieve a Value from Local Storage with getItem

The getItem() method accepts one parameter, a key name in local storage, and it returns thatkey's value: .

localStorage.getItem('keyName')

Since we're accessing keys from a regular JavaScript object, you can also retrieve a key's value using dot notation:

localStorage.keyName

Remove an Item in Local Storage with removeItem

The removeItem() method removes a given item from the localStorage object. It accepts one parameter, a key name, and it removes that key from the object if it exists:

removeItem('itemName') 

Local Storage in the console

To see local storage in action, let’s first access it in the console. Open any web page in your browser (Google’s home page, for example) and then open the JavaScript console in browser's developer tools.

Typing localStorage into the JavaScript console and pressing the "enter" key returns the local storage object. You can expand the object to see any items currently stored there. Now, let’s store a string of our own in the localStorage object. We’ll store the color green.

To do this, we can use the localStorage.setItem() method, passing in the key we want to add, 'color', as the first parameter, and its value, 'green', as the second:

localStorage.setItem('color', 'green')

Now we can get this item back by using the getItem() method, passing in the key we want the value for, in this case, 'color':

localStorage.getItem('color')

This returns the value set for the color key, green. You can test and confirm that this property doesn't exist on another site by navigating to a different site (developer.mozilla.org, for instance) and entering the same line again in the console:

localStorage.getItem('color')

This should return nullbecause we're in a different domain, and every domain gets its own local storage object -- that's a good thing. That means localStorage data set for a website can't be read by other websites.

Let's go back and check if the color property is still set on the original page:

localStorage.getItem('color')

The color property should still return the value green. localStorage data even lives on after the window is closed and you quit the browser. For example, quit Chrome, re-open it and go to google.com. Open the DevTools console, and check if the color value is still there:

localStorage.getItem('color')

This should once again return the value green. Let's delete the color string from the browser's local storage using the removeItem() method:

localStorage.removeItem('color')

Then let's verify it is gone by trying to read it again:

localStorage.getItem('color')

This should return the value null.

As you learned earlier, you can set, get and remove properties in local storage the way you can with any other JavaScript object. To set the same key/value pair we created earlier, type:

localStorage.color = 'green'

Then to retrieve the value,access the color property on the localStorage object like this:

localStorage.color

Finally, you can delete the color key from local storage using the JavaScript delete operator, which removes a property from an object:

delete localStorage.color

And we can confirm that it's gone by trying to read it again:

localStorage.color

Now you know how to set, retrieve and remove items in Local Storage! In the next step, let's create a fun project that demonstrates how you could use Local Storage on a web page.