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 get some hands-on experience using Local Storage in a small demonstration app.
Work along with the video:
You can launch the workspace for this video to follow along.
If you would prefer to download and work from a local copy instead:
- Download and unzip the project file here or from the Downloads tab.
- Make sure you have nodemon installed. To install, run
npm install -g nodemonfrom the command line. - Inside the project folder, open the folder called Start from the command line, then run
npm install && nodemon - You can now navigate to
localhost:3000in a browser to view the project. - To view the finished project, you can complete step 3 & 4 from the Finished_Project folder instead of the Start folder.
We've seen how to work with local
storage on its own in the console.
0:00
But what is it like to
integrate it into a project?
0:04
For this project, we'll save
recent searches made on a page and
0:07
display them in a list on the screen.
0:10
This will quickly give you a chance
to see local storage in action.
0:13
You can launch the workspace
to follow along or
0:17
download the files from this page
to use your own text editor.
0:19
Let's take a look at what
we'll build together.
0:23
Here's a generic search bar.
0:26
It could belong to any web page.
0:28
When I submit searches
to it They appear below.
0:30
They're also inserted into local storage.
0:40
Now submit one more search.
0:44
And then I'll close the window.
0:48
Now when I reopen the page,
the words are still there.
0:55
Now if I click the Clear Storage button.
0:59
They disappear, and the searches
are removed from local storage.
1:02
In this video, we'll write the code
that save searches to local storage,
1:07
maintains this visible list in the UI,
1:10
and clears the store when
this clear button is pressed.
1:12
Let's switch over to the code and
have a look.
1:17
Here you can see that we have
a very simple HTML web page.
1:22
We have a form with an input and
a submit button.
1:27
We also have our clear button
that we already saw in use.
1:34
I've already added some JavaScript
that takes care of listening for
1:39
events as well as manipulating the DOM.
1:42
When the page loads,
these two events are set up.
1:44
One fires for form submissions and
1:50
the other fires when
the Clear button is clicked.
1:52
When a form is submitted this handler
attempts to store the string and
1:55
updates the list on the web page.
1:59
When the clear storage button is clicked,
this handler deletes all the searches
2:04
from storage that updates
the UI on the page.
2:08
I've written a couple of helper
functions to update the UI.
2:13
This one creates a new list item and
2:16
adds it to the bottom of
the unordered list element.
2:19
And this one simply resets the list
by emptying the HTML inside.
2:23
Finally, I will establish some shell
functions that we'll be writing together.
2:31
You can see these functions
are called in the code below.
2:35
So what we need to do is connect
these functions to local storage and
2:46
serve the results.
2:50
Now before we do all that.
2:51
Let's make sure we can even
use local storage at all.
2:53
We'll start by wrapping the contents
of the onLoad function in an if block.
2:57
Inside of the if statement, we'll execute
3:06
a function called supportsLocalStorage.
3:11
And if supportsLocalStorage returns True,
3:15
then we wanna do all this, awesome.
3:22
There we go.
3:27
Now let's fill out the supports
local storage function.
3:28
Now what we're really doing is testing
that the browser has access to an object
3:33
called local storage.
3:38
And we're gonna test that a key called
3:45
localStorage exists in the window and.
3:51
That it's not null.
4:05
So this is saying, make sure the window
object has a localStorage key and
4:11
make sure that localStorage
key is a set of functions or
4:18
properties but that it's not null.
4:23
Now in some browsers or in some devices,
this could throw an error.
4:28
So rather than trying to run this and
flooding the console with errors.
4:32
Let's wrap this in a try catch block.
4:40
So we'll try that.
4:44
Oops, some Python was slipping in there.
4:49
We'll catch any exceptions.
4:53
If there's an exception,
we'll return false.
4:57
Don't wanna forget my semicolon.
5:03
Now let's walk back through
our onLoad function and
5:06
complete the code we'll
need as we encounter it.
5:08
Here's our initiation code,
which sets up our web page.
5:13
And here in the initialization
code we're going to update the UI
5:18
with any searches that were already done.
5:22
We'll need to retrieve those
searches from localStorage.
5:26
And that work is going to be done
by the getRecentSearches function.
5:29
So, let's write
the getRecentSearches function now.
5:34
First, we're going to retrieve
our list from localStorage.
5:38
LocalStorage.getItem('recentSearches').
5:48
And that's being assigned
to the variable searches.
5:57
Now keep in mind that this
value is going to be a string
6:01
even though we're going to
store our searches as an array.
6:06
That's because local storage can
only store string types, and
6:09
this presents only a minor challenge.
6:13
The way we'll work around it is to store
all of our data as stringified JSON.
6:14
I'll show you how to do
that in just a moment.
6:19
For now just know that when we get data
from recent searches in localStorage,
6:21
we're going to have to parse
it to return an array.
6:26
We also have to take into account
the fact that the string may be empty.
6:29
So we'll need to test searches to see if
it is truthy, meaning if it exists and
6:33
has a length.
6:38
If it is truthy,
we'll parse the string into an array and
6:40
return it using JSON.parse.
6:43
All of that sounds complicated, but
6:45
we're going to accomplish
it in a few lines of code.
6:48
If searches exist, we're
7:00
going to return it after turning
7:05
it into a valid JSON object.
7:10
Otherwise let's return an empty array.
7:23
As we saw, this function returns
an array to the onload function.
7:29
The results are then iterated over and
7:38
placed on the page using
the appendListItem method.
7:41
Now let's consider the submit event.
7:47
When a user enters some text and hits
return or click Submit, this handler calls
7:50
a function named saveSearchString.
7:55
Notice this takes place
inside of an if condition.
8:00
That's because apart from
saving the search string,
8:03
it's also doing some validation.
8:06
If the submission is valid,
it will save and return true.
8:08
Otherwise it will not save and
return false.
8:12
So let's go up to saveSearchString,
8:16
decide which search strings
are going to be valid.
8:18
Let's accept any unique entries
whose lengths are greater than 0.
8:23
To know if we've already saved
the string to local storage, and
8:28
therefore it's not unique, we'll need to
pull all the strings out to examine them.
8:31
We've already written a function to get
those strings, so let's call it and
8:35
assign the result to
the variable searches.
8:39
Now let's first test whether
the string is truthy or not,
8:46
then look to see if it's a duplicate
of what has already been stored.
8:49
If either of these checks fail,
8:53
we'll exit out of the handler without
doing anything with the submission.
8:55
Remember this takes a string variable.
9:01
So, we'll say if String is not truthy,
9:04
Or If the string
9:11
Already exists inside of the searches
9:20
array, we'll return False.
9:26
Otherwise we push the string
to our searches array.
9:46
Now, we'll store our searches under
9:58
the recentSearches key in localStorage.
10:03
Remember, we're going to
use the stringify method.
10:08
To turn our JSON object into a string.
10:15
Finally, since we've done our validation,
we know we can return true here.
10:20
Going back to our onload block.
10:29
We are inside the submit event,
so this all evaluated to true.
10:32
Now we're going to update the UI by
appending the search term to the list.
10:37
Finally we need to be able to remove
our searches using the clear button.
10:47
The removeSearches function is quite crude
and really only needs one line of code.
10:55
We're going to remove recentSearches
from our localStorage all together.
11:07
Now we could have done this,
11:16
from inside the onload function
all the way down here.
11:18
You could replace this line
of code with this one.
11:23
But most cases,
it's going to be better to pull it out.
11:29
One of the advantages to this is that
all of our references to localStorage
11:33
are in one place and
in these functions here.
11:37
This means that if we ever wanted to use
a different storage for these, take for
11:43
instance a database, we could just
change these functions without having to
11:47
dig into other parts of our code.
11:51
And this is the end of our project.
11:53
Let's test in the browser
to make sure it all works.
11:55
Oops.
12:09
It looks like there's
an error with our code.
12:10
So let's go back and see what we can find.
12:13
There it is here in
the saveSaveString function.
12:19
I'm saving only the single
string that was provided
12:23
in that search rather than storing
our entire searches array.
12:28
So here I'll replace strings,
string rather with searches.
12:38
Now let's refresh the page.
12:48
Now we can see that our
application is working.
13:00
Well done.
13:05
Now you can use localStorage to store
data, right inside the browser.
13:06
Congratulations and
keep up the great work.
13:10
You need to sign up for Treehouse in order to download course files.
Sign up