Current section: Session Storage 6 exercises

Efficiently Updating and Serializing Cookies

Loading solution


00:00 So let's go to our root, and we'll come down here to our loader, where we are loading the toast. And we need to add the unset. So let's say toastCookieSession.unset toast. And that might seem like all you need to do,

00:16 but we actually need to let the browser know that we no longer want this toast property inside that cookie. Now, of course, the browser doesn't know that there's a toast property. All the browser sees is this big, long, weird string. We need to serialize the current state of the toastCookieSession into that new string, and it will be different,

00:36 because it no longer has the toast in it. And then we need to let the browser know about this. So we have a bit of a problem here, though, because we could just say, OK, let's add another setCookie header here. And it's whatever it ends up being here.

00:51 I guess it would be a wait toastCookieSessionStorage or toastSessionStorage. There it is. And then commit the toastCookieSession to that. There we go. But we got a problem, two problems, actually. We need it to be in here as well.

01:09 But also, you can't have two properties that are the same. And so what you can do is you can make a headers object, a new headers. And then we can say headers.append setCookie. And that's where we can put this right here.

01:27 And then headers.append and setCookie for this, if it exists. So we say, if that, then we'll do that. Seems like a lot of work. Ultimately, that would result in just saying headers or, yep, there you go.

01:46 So I mean, that looks nice and everything, but I don't want to have to do this. No, no, no. So we have a utility. Hooray. A utility that effectively does the same thing. So I'm going to back this up because I want to have those objects here. And we're going to say combineHeaders.

02:04 That's going to come from combineHeaders right there from our utils. And we're going to call this with our two headers here. So let's get that one out of here. So that'll take care of our CSRF cookie header. And it will actually handle null. So let's pass in null so we don't

02:22 have to do that empty object thing anymore. And then we'll add another object of headers that has our setCookieHeader for our toast session. And that is effectively the same thing as what we were doing with this headers object, except I think it looks nicer. So then you can have any number of headers that you like,

02:41 and it'll just combine them all nicely. And with that now, I can go to one of these notes. And we can delete it. And it shows up. And if we refresh, it doesn't show up anymore. Hooray! So let's take a look at our cookies, make sure that the things are happening

03:00 the way we want them to. We can take a look at the network as well. So we'll go here. We'll clear this out, hit Delete. And we get that note shows up there. On the post, we'll take a look at our set cookie. We have Ian Toast. That's exactly what we would expect. We're setting that cookie.

03:17 And then on the root, we take a look at this set cookie. This is another Ian Toast, so that's coming from this one. We don't get the CSRF because we didn't change the token. And so we just get the one. And yeah, this is shorter because it no longer has the toast in it. And that is awesome.

03:36 So then we take a look at our application. And we see we do have the CSRF. We have the Ian Toast. But it's short because it doesn't have the toast in it. Now, you might think, OK, Kent, well, if we're just getting rid of the only thing that is in this toast cookie session, why don't we just say Destroy Session instead?

03:54 And yeah, you totally could do that. For various reasons, we're not going to. It could be that we later on decide, oh, I actually do want to set other things in this cookie, additional toasts or something like that, some toast configuration or something. And it would be kind of surprising to not or to have this Destroy Session.

04:14 I could go either way on this. If you made a pull request that changed the Commit Session to Destroy Session, if we were like coworkers or something, you made a pull request like that, I'd probably merge it. But we're going to go with Commit Session and Unset because I feel like that doesn't violate

04:33 the principle of least surprise. And this isn't really that much data to transfer in the cookie anyway. But we're not totally done. This is such a common pattern that we're going to do a little bit more in the next step. So really, we didn't actually do a whole lot. We literally just say Unset, and then we

04:51 had to do a couple of funny things because we need to set multiple cookies in the root. But other than that, that's it, just Unset.