Current section: Session Storage 6 exercises

Toast Messages with Cookies

Loading exercise


00:00 Next, we want to be able to show the user a toast message when they delete a note, for example. If we go to root.tsx, we've got this new show toast thing and we have also this toaster that was built for us by Kelly. Thank you, Kelly, co-worker.

00:17 The show toast allows us to call the show toast utility from this package that we're using. If I come over here to this, let's just test this out to see what that looks like. Show toast and our toast equals, come on, Copilot, you can do this for me.

00:36 There you go. Hello. There it is and it's pretty cool. We have drag control and all that stuff. It's pretty awesome. We want to be able to show that toast. There's a couple of steps to this exercise to get us to that point. But we're going to be using cookies to manage this so that we can set a value for our toast in the cookie and then

00:56 load it into the data toast property. All of this stuff is wired up. Our job is just to get the cookie value set and then read that cookie value. The reason that we're going to use cookies for this is because we want to be able to have a redirect that triggers this toast.

01:14 I delete the note and then redirect over to my notes list page and that should show the toast that you successfully deleted it. This isn't the only time you'll ever want to show a toast. There are certainly sometimes just as a client-side thing that you want to show a toast. But we're going to be learning about

01:34 a special feature or a special pattern of cookies called flashes. Let's get started by creating a cookie and then we'll move on from there.