Build a Notes App with Alpine.js
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
10. Persisting note state

Episodes

0%
Your progress
  • Total: 55m
  • Played: 0m
  • Remaining: 55m
Join or sign in to track your progress

Transcript

00:00
At the moment, we can create a bunch of notes,
00:02
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
00:13
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
00:19
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
00:31
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.
00:41
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
00:53
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.
01:04
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.
01:11
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
01:18
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?
01:26
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.
01:35
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.
01:46
Let's see why. So maybe when we touch a current note, let's say this persists notes. Just see where we go.
01:54
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.
02:04
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.
02:14
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.
02:21
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.
02:34
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,
02:46
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.
02:54
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
03:05
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,
03:18
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.
03:30
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,
03:42
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.
03:52
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
04:02
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
04:14
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
04:22
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.
04:34
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
04:46
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,
04:57
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.
05:09
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.
05:22
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,
05:32
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.
05:41
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.
05:51
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
06:01
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,
06:07
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,
06:19
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.
06:28
There is our note inside of our storage. Let's update this. So new note and new note body, and give that a refresh,
06:36
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,
06:47
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.

Episode summary

In this episode, we focus on making our note app way more useful by making sure your notes actually stick around after you refresh the browser. Right now, whenever you reload the page, all your notes disappear and you’re back to square one. Definitely not ideal for any real app!

The solution: we use the browser's local storage as a quick way to save and retrieve your notes. We walk through how to persist notes to local storage every time you update or create a note, and how to initialize your app with the saved notes when the page loads again. There's some discussion about best practices—like when to actually save the notes (on creation, when editing, etc.), and the difference between storing all notes together vs. updating them individually if you were using a real database.

You'll see a step-by-step implementation: saving the notes as a string to local storage (using JSON.stringify), then making sure to JSON.parse them when loading up your app. We even debug a few little mistakes—like forgetting to parse JSON or always starting from an empty array—so you’ll know the gotchas, too.

By the end, we have a notes app that keeps everything in sync with local storage; your notes stay exactly as you left them, even after a refresh!

Episode discussion

No comments, yet. Be the first!