The local storage API offers a lot of flexibility.

You could store, retrieve and

delete data using local storage methods like set item, get item, and remove item.

Or you can skip these methods and treat local storage like a plain JavaScript

object adding properties and values as you would on any object.

You can try out local storage easily in a web browser.

So let's open up Chrome Devtools and I'll show you how.

As you can see, I've opened up Chrome and I have the main Google.com page open.

The site you're on isn't too important for our purposes, but

if you want to follow along with me, go ahead and pull up Google's main page.

To open Chrome's developer tools on a Mac,

you can use the Cmd+J shortcut or you can find it in the menu.

Typing L into the JavaScript console, I see localStorage.

And I'd like to type it out, so I can press Tab to autocomplete it.

Hitting Enter, I can see the localStorage object, right inside my console.

These values may or may not look like the ones you see in your browser.

It's not obvious what these values are for, but it's interesting nonetheless

to see our first look at local storage being used in the wild.

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 localStorage's setItem method.

The first parameter is going to be the key we're storing, which is color.

And the second parameter is going to be the value we're storing, which is green.

Now we'll add a different string with the same color property

to the sessionStorage object.

We'll access the session storage through a variable you can probably guess,

sessionStorage and we use the same method,

setItem color but this time the color is going to be orange.

I'll just clear my console.

Now, we get those items back by using the get item method and

passing in the key we want the value for.

In this case, it's color.

And for localStorage, I'm going to get the color green.

And for sessionStorage, I'm going to get the color orange.

Great. We can see that we get

the different colors we put into each store.

Let's just do an experiment to show that these properties

don't exist on any other site by navigating to developer.mozilla.org and

we'll look for the same key.

And actually I'll use my up arrow to find the command.

And you can see that sessionStorage and

localStorage are not stored under the mozilla.org,

the developer.mozilla.org rather URL.

And this is actually a positive thing.

This means that the Mozilla website can't read my local storage data from Google and

Google can't read local storage data sent by other websites in my browser.

Now let's go back to Google.com to make sure our values are still stored there.

localStorage has the color of green and sessionStorage has the color orange.

Now let's completely close our browser and go back to the google.com website.

Once again opening the JavaScript console,

I can see that there's no color stored in the session storage.

But check out the localStorage.

The green color persisted even when I close the session.

Now let's remove the color green by using localStorages removeItem method.

Let's just make sure that works.

And now we're getting back, nothing for the color key.

As I mentioned earlier, you can set get and remove properties and

localStorage, the exact same way you would with any other JavaScript object.

So to set the same key value pair we created earlier,

we could just type in localStorage.color = green.

Now to access that property, I type in localStorage.color and there it is.

And of course to delete it, first I'll clear my console, I can use

JavaScript's delete keyword, and then provide the property.

That's really all there is to using localStorage.

Next up, let's create a fun project that demonstrates how you could

use localStorage on a web page.