Transcript

          Okay then.

So in this course so far, we've created two different projects now and they both work with some kind

of data, the to do list work with to Dos, which is a form of data.

And the weather app worked with location and weather data.

Now in both of those projects, if we refresh the page at any point, it would reset the application

to their original state and it would not keep hold of any data.

We might have input to the website.

Now sometimes we want to do that.

If a user crosses off the website and comes back later or just refreshes the page, it would be nice

to keep or persist the data that a user input and then show it on the application again.

Now how can we do that?

Well, to do that we could do one of two different things.

We could either set up a database on a server somewhere to store all of our data in, then retrieve

that data whenever we start up the web application.

That's one option.

Or we could use local storage to store data in, which would mean we're storing the data locally in

the user's browser and we can get that whenever our web app starts.

Now we're going to be looking at databases later on in the course.

But to begin with, I want to talk about local storage.

So the local storage API is provided to us by the browser and it gives us a way to store data and retrieve

data to and from the browser itself.

That means when a user enters info on our web app, we can then store that in the browser's local storage

on the user's computer.

Now, if at some point they refresh the page or cross it off completely and come back later, then we

can access that data that we previously stored from local storage in the browser and inject it back

into our application.

So let's have a look at this in action.

So the local storage API is stored on the window object inside a browser.

So I'm just going to type that out and press enter.

Then if I expand this and scroll right the way down to local storage, we can see that right there.

Now, if I expand this, you're going to notice it has a length property.

Now that length property represents how many different things or items we have stored in local storage.

Now, right here it's saying zero, meaning there's nothing stored in local storage for me.

But as we add more items, this could be one, two, three, etcetera, depending on how many different

things we have stored.

Now, we also have several methods.

If we open up this proto property right there, we can see things like clear get item, remove item

set item, etcetera.

So we're going to use all of these different methods to interact with local storage and add items to

it, remove items and retrieve items, that kind of thing.

So the ultimate idea here is that we're storing data inside the browser and each item of data is going

to have a key and a value, much like when we make JavaScript objects.

Now each value that we store in local storage has to be a string.

That doesn't mean that we can't store objects, arrays or more complex data as values in local storage.

It just means that we have to pass the data we store from a string into another format before it's used

and vice versa.

Now we've seen this kind of behavior before.

When working with Json strings, the exact same methodology is going to apply to local storage when

we want to store more complex data structures.

So in this chapter I'll be showing you all the basics of local storage, and then we're going to be

updating our weather app from the previous chapter to use local storage as well.