Local Storage Project

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