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.
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:
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.
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:
The getItem() method accepts one parameter, a key name in local storage, and it returns thatkey's value: .
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:
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:
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':
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:
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:
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:
This should once again return the value green. Let's delete the color string from the browser's local storage using the removeItem() method:
Then let's verify it is gone by trying to read it again:
This should return the value null.
localStorage.color = 'green'
Then to retrieve the value,access the color property on the localStorage object like this:
And we can confirm that it's gone by trying to read it again:
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.