Transcript

          Now, so far we've only been storing simple values in our local storage, things like a name and an

age.

Now, sometimes we might want to store something more complex like an array of data, But how do we

do this?

Well, remember, the data we store in local storage must ultimately be a string.

We saw that when we tried to store a number.

It converted that into a string.

Everything we store is ultimately a string, so we need to somehow take some more complex data like

an array and turn it into a string.

Then we store it in local storage.

At some point in time we get that data back and at that point we need to take that string and pass it

into something that we can work with in JavaScript like an array again.

So this all sounds very much like how we'd work with Json when making Http requests.

We'd send a request to an endpoint and get back some Json data, which is just a string of data.

Then we'd pass that data string into a format that we can work with in JavaScript, an array of objects.

So we'll be doing a similar thing here.

So first of all, let me just paste in this constant called todos, which is an array of objects.

So say we have these in our JavaScript file.

Now what we want to do is store these in local storage.

So the first step is to take this data and turn it into a Json string.

So we've seen in the past in the asynchronous chapter how to take a Json string and pass it into a JavaScript

array of objects.

But what we want to do is the opposite.

Now we've got a JavaScript array of objects and we want to turn that into a Json string.

So how do we do that?

Well, fortunately it's very simple.

There is a method on the Json object called Stringify to do this.

So what I could do is first of all say console dot log so we can see this, then get the Json object,

then use a method called stringify and this turns something like this into a string.

So we're going to take the to dos and paste them in there and we're logging the results of this to the

console just so we can see what it's like.

Save it and go to the console.

And now we can see this is one gigantic string which looks like an array of objects.

It's a Json string.

Notice how our properties like text and author, they're all double quoted.

They're not over here, right?

We don't have quotes.

But remember when I said that Json had to have double quotes around the properties?

That's what this is doing.

This Stringify method is turning an array of objects into valid Json.

So now this is a Json string.

This is in a good format now to store in local storage.

So I'm going to comment that dude out and underneath I'm going to take this and I'm going to store it

in local storage using this method.

So I'm going to say local storage dot set item.

This is how we set an item.

I'm going to call it to do's.

That will be the key.

So to do's.

And then I want to pass in Json dot stringify and pass in the to do's.

So this item right here that we're storing is ultimately a Json string which represents the to do's.

So if we save that now, it should be stored in local storage.

We can go to application and we can see to do's right there and the value over here.

Okay, so now we've stored that, how do we retrieve it and then convert it back into an array so we

could use it if we wanted to?

Well, what we do is then say const and we'll call this stored because it's the stored data.

Probably not the best name variable, but whatever.

And then we'll say we want to set that equal to local storage and we need to say get item to get an

item from this.

And the item we want is to do's.

Now if I currently log this to the console by saying console dot, log to do's, then it's still going

to be in string format because we've not done anything with it yet.

And actually it's array format, but that's because I've logged the wrong thing.

I've logged out to do's directly, which is this.

And in fact I want to log out stored, which is this.

So if I save that you can see it's still in Json string format.

So we've seen how to take a Json string and turn it into an array.

Previously all we do is use the method pass on that Json.

So I can now say Json dot pass and pass this right here and now that's going to turn it back into an

array.

So if we save this and we can see now the array.

So there we go, my friends, that's how we take a JavaScript array like this of objects.

We can turn it into a Json string using Json.stringify.

Once we have it in that string format, then we can save it or set it to local storage like we do right

here then.

If we want to retrieve it in the future, we do that as normal.

But before we use that data, we pass it back into something we can use using Json dot pass.

So now we know all the basics of local storage.

I think now we should take this knowledge and apply it to our weather app right here.

So we'll start that in the next video.