Transcript

          So first of all, we need to say local storage and then to store a new item.

In local storage, we use the method set item.

Now this method takes two arguments.

The first argument is the name of the key.

So I'm going to call this name.

And then the second argument is the value of that key.

I'm going to say, Mario, I'm going to do one more.

So let me just duplicate this and this time I'll say age, and I'm going to set this to 50.

Okay?

So now we have these two items set in local storage.

Now that's all it takes.

And if I go over to the console and type out local storage now, now we can see we have these two items

in it and the length is two.

Now remember in the last lecture I said that everything we store in local storage must be a string.

And notice when we set something over here 50 that it automatically turned that into a string.

So it's absolutely fine to use an integer here.

That's fine, but just be aware that it is turning it into a string over here.

So anyway, that's how we set data.

Now we have these two things in local storage, so we could also go over here to the application tab

and go to local storage, which is right here for this site.

And we can see the key and value pairs.

The key is age, the value is 50, the key is name and the value is Mario.

So that's another way that we can see local storage.

So say now I want to actually retrieve data from local storage and use it inside my application.

How would I do that?

Well, what I could do is create a new variable.

I'm going to call it name and set it equal to local storage, first of all.

Then we use a method called get item.

Pretty self-explanatory.

And all I do is pass in as an argument the name of the key that I want to get.

So one of these two things so I could say name for this because that is the name of the key.

So if I do this then log out name we should see hopefully Mario.

So console dot log and then we want name, which is now this variable which we get from local storage.

We should hopefully see Mario.

So come over here and go to console and we see Mario.

We could do the same thing for age.

So let's duplicate that and change this to age and this to age as well.

Then we want to output the name and the age.

Save it and now we see Mario and 50.

Awesome.

Cool.

So that is how we set data or set items on local storage and store them and this is how we retrieve

them again.

So if I was to cross this off and come back or even just refresh, we wouldn't lose that data.

And in fact, what I'm going to do is just comment this out so we're not resetting them.

Now when we reload the web page, we're just getting them.

And we can still do this because the stored in local storage and they're going to stay around when we

refresh, then they're going to stay around and we still have access to them.

I could just as easily go to a new tab, paste this in and open up the console and we see these things

right here.

So it doesn't matter.

Now that we're closing off the website and coming back, we're storing it in local storage and now we

can retrieve it, which is pretty awesome.

So anyway, that's how we set items and that's how we retrieve them.

One last thing in this video I'd like to show you, and that is how to update something that we already

have.

So we already have a name and we already have an age.

What if we wanted to update these values?

Well, we can use the method set item again and just.

Overwrite it.

So all we'd have to do is say local storage, then set item, just like we did to initially set it.

Then we're going to set name and we're going to set that equal to Luigi this time.

And all this does is look to see if name already exists.

If it does, which it does, it's going to replace that.

If it doesn't, it will create a new one.

So that's how we overwrite something.

So now if we retrieve this again, I'm going to say name is now equal to local storage dot get item

and we want the name and I have to get it again so that we're updating the name variable.

We originally set it up here and log it out to the console.

Now we change what name is in local storage.

We're going to get it again and console dot log the name save that we should see Mario first.

Then we change that and we retrieve it again.

Then we should see Luigi.

So we see Mario then Luigi Now we could also update items using dot notation so I could just as easily

say local storage dot whatever the key is.

So in this case, age or name, and I could set that equal to something else so I could now set it equal

to 40 and that's going to overwrite the age.

So this time I'm going to also retrieve age down here that's equal to local storage dot get item.

And we want the age this time.

And if we log out name and age this time we should see Luigi and 40.

So Mario 50.

Luigi 40.

Awesome.

Now if I was to then comment out these and I'm also going to comment out this stuff right here when

we get the stuff, is it going to be Mario or Luigi?

Well, it should be Luigi and 40 because the last time we set them was down here.

So if we save it we can see Luigi and 40.

So there we go my friends.

That is the basics of local storage and how to set items and how to retrieve items.

In the next video, I'll show you how to delete items from local storage.