This workshop will be retired on July 5, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let's play with the Local and the Session Storage API in Chrome's DevTools to get a feel for how to use them.
The local storage API offers
a lot of flexibility.
0:00
You could store, retrieve and
0:03
delete data using local storage methods
like set item, get item, and remove item.
0:04
Or you can skip these methods and treat
local storage like a plain JavaScript
0:10
object adding properties and
values as you would on any object.
0:14
You can try out local storage
easily in a web browser.
0:18
So let's open up Chrome Devtools and
I'll show you how.
0:21
As you can see, I've opened up Chrome and
I have the main Google.com page open.
0:23
The site you're on isn't too important for
our purposes, but
0:29
if you want to follow along with me,
go ahead and pull up Google's main page.
0:32
To open Chrome's developer tools on a Mac,
0:36
you can use the Cmd+J shortcut or
you can find it in the menu.
0:40
Typing L into the JavaScript console,
I see localStorage.
0:48
And I'd like to type it out, so
I can press Tab to autocomplete it.
0:55
Hitting Enter, I can see the localStorage
object, right inside my console.
1:00
These values may or may not look like
the ones you see in your browser.
1:05
It's not obvious what these values
are for, but it's interesting nonetheless
1:09
to see our first look at local
storage being used in the wild.
1:14
Now let's store a string of our
own in the localStorage object.
1:18
We'll store the color green.
1:22
To do this,
we can use localStorage's setItem method.
1:24
The first parameter is going to be
the key we're storing, which is color.
1:32
And the second parameter is going to be
the value we're storing, which is green.
1:37
Now we'll add a different string
with the same color property
1:44
to the sessionStorage object.
1:47
We'll access the session storage through
a variable you can probably guess,
1:50
sessionStorage and we use the same method,
1:53
setItem color but
this time the color is going to be orange.
1:58
I'll just clear my console.
2:07
Now, we get those items back by
using the get item method and
2:09
passing in the key we want the value for.
2:13
In this case, it's color.
2:16
And for localStorage,
I'm going to get the color green.
2:23
And for sessionStorage,
I'm going to get the color orange.
2:31
Great.
We can see that we get
2:35
the different colors we
put into each store.
2:37
Let's just do an experiment
to show that these properties
2:40
don't exist on any other site by
navigating to developer.mozilla.org and
2:43
we'll look for the same key.
2:47
And actually I'll use my up
arrow to find the command.
2:49
And you can see that sessionStorage and
2:53
localStorage are not stored
under the mozilla.org,
2:57
the developer.mozilla.org rather URL.
3:03
And this is actually a positive thing.
3:08
This means that the Mozilla website can't
read my local storage data from Google and
3:10
Google can't read local storage data
sent by other websites in my browser.
3:16
Now let's go back to Google.com to make
sure our values are still stored there.
3:22
localStorage has the color of green and
sessionStorage has the color orange.
3:27
Now let's completely close our browser and
go back to the google.com website.
3:35
Once again opening the JavaScript console,
3:42
I can see that there's no color
stored in the session storage.
3:46
But check out the localStorage.
3:51
The green color persisted even
when I close the session.
3:53
Now let's remove the color green by
using localStorages removeItem method.
3:59
Let's just make sure that works.
4:10
And now we're getting back,
nothing for the color key.
4:13
As I mentioned earlier,
you can set get and remove properties and
4:19
localStorage, the exact same way you
would with any other JavaScript object.
4:23
So to set the same key value
pair we created earlier,
4:27
we could just type in
localStorage.color = green.
4:35
Now to access that property, I type in
localStorage.color and there it is.
4:42
And of course to delete it,
first I'll clear my console, I can use
4:49
JavaScript's delete keyword,
and then provide the property.
4:54
That's really all there
is to using localStorage.
5:12
Next up, let's create a fun project
that demonstrates how you could
5:14
use localStorage on a web page.
5:18
You need to sign up for Treehouse in order to download course files.
Sign up