How to use Local Storage

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