Sign up to access "Build a Notes App with Alpine.js" right now.

make some changes. But if we refresh, we just end up with the same empty list and the same initial empty note. So we want to go ahead and implement some sort of storage

solution. What we're going to do here is use local storage in the browser. The way that we're going to do this is basically just

persist all notes that we have within data in local storage and then fetch them out when we first land on the page. If you're working with a database, this is going to be slightly different because you'll

want to update individual notes rather than save all of the notes in one go. So let's look at this solution. Then we can always switch out later if we need to.

OK, when do we want to persist a note? Well, we want to persist a note when we create a note, when we touch a current note, which technically we do here. So we're going to implement the persistence when

we touch a note. And we can always go ahead and switch these methods around since we're splitting them up. So let's create a persist notes method in here.

And let's see what we need to do. The first thing that we'll actually do is bring up local storage in our browser just so we can see what we mean.

If we come over to local storage here for this particular file, you can see that I've actually got a few notes stored in here or one note stored in here from when I was playing around

with this. But this should be empty for you on this particular page. This is where we want these to end up. So how are we going to do this?

Well, we're going to go ahead and use local storage within JavaScript to set an item. And we can call that whatever we want. Let's, of course, just call this notes.

Now what we want to do is take the data in the array that we have inside of this Alpine store and put that into our notes local storage. Now at the moment, this isn't quite going to work.

Let's see why. So maybe when we touch a current note, let's say this persists notes. Just see where we go.

So if we come over here and give this a refresh, of course, we've landed on the page for the first time, which means that down here when we initialize this, we create a new note.

On the process of creating a new note, we touch the current note's timestamp, which persists it. Now this method could exist anywhere. You could do this in here if you wanted to.

That kind of makes a little bit more sense because touching a current note's timestamps doesn't really relate to persisting. So let's keep that there.

The point is, though, that we've stored this as an object, which we don't want to do. A literal object string is being output or put into our store. So to do this, we go ahead and stringify this with JSON.

So let's go ahead and stringify and say this data. So that's going to add a string for us of our array of objects that we have. So let's come over and clear out our local storage,

give this a refresh, and there we go. We end up with a notes key, and the value is an array of the first note that we get when we land on the page.

So if we go ahead and edit this note, so let's just say new note, of course, that's going to go ahead and update the last timestamp. It is not, however, updating any of the content

inside of the title or the body. Now there's a couple of ways that we can deal with this. At the moment, what we're doing is at the top here, when we go ahead and have an input event on this,

so a key down or a key up in this case, we're going ahead and touching the current note. What we would probably want to do here is also persist this. We could do this in a couple of ways.

We could go ahead and also say store notes, persist notes. So let's do this for just the title for now so we can see that this works. So let's say new note, and you can see, sure enough,

the local storage has been updated. And we can implement the same thing for the body as well. Or what we could do is say the current note was updated, and then persist it.

So you could extract both of these things out to a separate method. Let's leave it like this for now. I will show you what I mean by extracting this out

to a separate method, just so you're clear. So for example, instead of doing this, you could say store notes current note updated, almost like a kind of just standard event

that we would call. And that current note updated method, if I just return that to how it is at the moment, would do both of the things that we originally

were doing in that event handler. So current note updated, and let's just spell that properly, current note updated. And again, let's spell that properly.

And what that would do is invoke touch current note and persist notes. There are lots of different ways that we can do this. We're just going to do both of these two things here

inside that event handler at the top. That should be enough. So if we just go ahead and say new note and new note title or body in this case,

you can see that local storage is being kept up to date. Now, when we give this a refresh, of course, what's happening here is everything is kind of reverting back to the way it was.

Now, this might not make sense, but if we look at the logic behind this, if the data length of our array, when we first start, is not empty, we set that note.

What's happening here, though, is the data is always an empty array because we just have an empty array up here. What we're not doing is fetching the initial local storage,

and that means that we're always creating a fresh new note, persisting that in storage, and it is just basically having the same effect as we saw before.

So what we need to do to finish this off is actually fetch initially the items from local storage. So to do this, we want to go ahead and grab from local storage.

So we use get item now instead of set item and notes. Now, if that doesn't exist, which is highly likely when we first end up on this, we're going to go ahead and set this

to an empty array instead. Now, let's take a look at this and see the problem that we're going to get. You can see at the moment,

even though we do have a note in here, we're actually seeing an error here, and that is just because we have a string here, remember. So what we need to do when we stringified it with JSON,

we now need to parse this with JSON so we actually get back an array of objects. Let's go over and give this a refresh, and there we go.

There is our note inside of our storage. Let's update this. So new note and new note body, and give that a refresh,

and we end up with exactly the same thing. Let's create a new note. Again, what that's done is that's persisted that for us, and we can go ahead and say another note,

another note body, give that a refresh. We end up with exactly the same thing. We can switch, we can edit these, and everything is nicely kept up to date.