We've seen how to work with local storage on its own in the console.

But what is it like to integrate it into a project?

For this project, we'll save recent searches made on a page and

display them in a list on the screen.

This will quickly give you a chance to see local storage in action.

You can launch the workspace to follow along or

download the files from this page to use your own text editor.

Let's take a look at what we'll build together.

Here's a generic search bar.

It could belong to any web page.

When I submit searches to it They appear below.

They're also inserted into local storage.

Now submit one more search.

And then I'll close the window.

Now when I reopen the page, the words are still there.

Now if I click the Clear Storage button.

They disappear, and the searches are removed from local storage.

In this video, we'll write the code that save searches to local storage,

maintains this visible list in the UI,

and clears the store when this clear button is pressed.

Let's switch over to the code and have a look.

Here you can see that we have a very simple HTML web page.

We have a form with an input and a submit button.

We also have our clear button that we already saw in use.

I've already added some JavaScript that takes care of listening for

events as well as manipulating the DOM.

When the page loads, these two events are set up.

One fires for form submissions and

the other fires when the Clear button is clicked.

When a form is submitted this handler attempts to store the string and

updates the list on the web page.

When the clear storage button is clicked, this handler deletes all the searches

from storage that updates the UI on the page.

I've written a couple of helper functions to update the UI.

This one creates a new list item and

adds it to the bottom of the unordered list element.

And this one simply resets the list by emptying the HTML inside.

Finally, I will establish some shell functions that we'll be writing together.

You can see these functions are called in the code below.

So what we need to do is connect these functions to local storage and

serve the results.

Now before we do all that.

Let's make sure we can even use local storage at all.

We'll start by wrapping the contents of the onLoad function in an if block.

Inside of the if statement, we'll execute

a function called supportsLocalStorage.

And if supportsLocalStorage returns True,

then we wanna do all this, awesome.

There we go.

Now let's fill out the supports local storage function.

Now what we're really doing is testing that the browser has access to an object

called local storage.

And we're gonna test that a key called

localStorage exists in the window and.

That it's not null.

So this is saying, make sure the window object has a localStorage key and

make sure that localStorage key is a set of functions or

properties but that it's not null.

Now in some browsers or in some devices, this could throw an error.

So rather than trying to run this and flooding the console with errors.

Let's wrap this in a try catch block.

So we'll try that.

Oops, some Python was slipping in there.

We'll catch any exceptions.

If there's an exception, we'll return false.

Don't wanna forget my semicolon.

Now let's walk back through our onLoad function and

complete the code we'll need as we encounter it.

Here's our initiation code, which sets up our web page.

And here in the initialization code we're going to update the UI

with any searches that were already done.

We'll need to retrieve those searches from localStorage.

And that work is going to be done by the getRecentSearches function.

So, let's write the getRecentSearches function now.

First, we're going to retrieve our list from localStorage.

LocalStorage.getItem('recentSearches').

And that's being assigned to the variable searches.

Now keep in mind that this value is going to be a string

even though we're going to store our searches as an array.

That's because local storage can only store string types, and

this presents only a minor challenge.

The way we'll work around it is to store all of our data as stringified JSON.

I'll show you how to do that in just a moment.

For now just know that when we get data from recent searches in localStorage,

we're going to have to parse it to return an array.

We also have to take into account the fact that the string may be empty.

So we'll need to test searches to see if it is truthy, meaning if it exists and

has a length.

If it is truthy, we'll parse the string into an array and

return it using JSON.parse.

All of that sounds complicated, but

we're going to accomplish it in a few lines of code.

If searches exist, we're

going to return it after turning

it into a valid JSON object.

Otherwise let's return an empty array.

As we saw, this function returns an array to the onload function.

The results are then iterated over and

placed on the page using the appendListItem method.

Now let's consider the submit event.

When a user enters some text and hits return or click Submit, this handler calls

a function named saveSearchString.

Notice this takes place inside of an if condition.

That's because apart from saving the search string,

it's also doing some validation.

If the submission is valid, it will save and return true.

Otherwise it will not save and return false.

So let's go up to saveSearchString,

decide which search strings are going to be valid.

Let's accept any unique entries whose lengths are greater than 0.

To know if we've already saved the string to local storage, and

therefore it's not unique, we'll need to pull all the strings out to examine them.

We've already written a function to get those strings, so let's call it and

assign the result to the variable searches.

Now let's first test whether the string is truthy or not,

then look to see if it's a duplicate of what has already been stored.

If either of these checks fail,

we'll exit out of the handler without doing anything with the submission.

Remember this takes a string variable.

So, we'll say if String is not truthy,

Or If the string

Already exists inside of the searches

array, we'll return False.

Otherwise we push the string to our searches array.

Now, we'll store our searches under

the recentSearches key in localStorage.

Remember, we're going to use the stringify method.

To turn our JSON object into a string.

Finally, since we've done our validation, we know we can return true here.

Going back to our onload block.

We are inside the submit event, so this all evaluated to true.

Now we're going to update the UI by appending the search term to the list.

Finally we need to be able to remove our searches using the clear button.

The removeSearches function is quite crude and really only needs one line of code.

We're going to remove recentSearches from our localStorage all together.

Now we could have done this,

from inside the onload function all the way down here.

You could replace this line of code with this one.

But most cases, it's going to be better to pull it out.

One of the advantages to this is that all of our references to localStorage

are in one place and in these functions here.

This means that if we ever wanted to use a different storage for these, take for

instance a database, we could just change these functions without having to

dig into other parts of our code.

And this is the end of our project.

Let's test in the browser to make sure it all works.

Oops.

It looks like there's an error with our code.

So let's go back and see what we can find.

There it is here in the saveSaveString function.

I'm saving only the single string that was provided

in that search rather than storing our entire searches array.

So here I'll replace strings, string rather with searches.

Now let's refresh the page.

Now we can see that our application is working.

Well done.

Now you can use localStorage to store data, right inside the browser.

Congratulations and keep up the great work.