Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
One of the ways you make HTTP appear to be stateful is by storing little bits of data on each request that is sent up to the server. These are called cookies. Let’s bake some!
Note: The "Resources" tab has since been renamed to the "Application" tab in the dev tools.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
When you were learning about http,
0:00
you probably heard about
something called cookies.
0:02
Now cookies are bits of data that
are stored on the client and
0:05
are sent on each request
to a specific domain.
0:07
Now, one of the hardest things about using
cookies is avoiding the impulse to say,
0:10
me want cookie, a la Cookie Monster.
0:15
So now that I've got that out of the way,
hopefully I won't do that again.
0:19
I'm sorry about that.
0:22
You can set a cookie on a response and
read it on all future requests.
0:25
That sounds exactly like what we wanna do.
0:28
Let's go use some cookie power.
0:31
Okay, so first thing's first,
0:33
let's go extract that query
parameter that we pulled here.
0:34
Let's put that into its own variable.
0:38
So again,
what you do is you highlight that, and
0:40
you choose Refactor, Extract, Variable.
0:43
And what that will do is it will pull
out a brand new variable line, and
0:47
it's gonna try to name it.
0:51
Did a great job.
0:52
Username's fine.
0:53
And it replaces it.
0:53
So now, this variable is able,
we're able to use this variable twice.
0:54
It's the point of a variable,
the local variable.
0:59
So on the response object,
the ability to set a cookie exists.
1:02
So you do a cookie, and then you save the
name of the cookie that you want it to be.
1:07
So we want it to be called username.
1:11
And we want to set it to that
new variable that we just did.
1:13
Okay, so now every request
that gets sent to our domain,
1:18
which in our case here is localhost.
1:21
It will receive this data.
1:23
Do you wanna see it?
1:25
Cool, let's do it.
1:27
So let's go come here.
1:27
And we will reboot the server.
1:29
And we'll fly over to our page.
1:32
I have my network tools up.
1:35
I'm gonna go ahead, and
I'm gonna type craigsdennis.
1:38
But before I click Sign in,
I wanna show you something.
1:42
So, this is shortened cuz
my screen is smaller here,
1:44
but at these little arrows there's
a thing here called resources.
1:48
Now look at resources.
1:51
There is a thing called cookies and
then there's a thing that says localhost.
1:52
This site has no cookies
because we haven't set it yet.
1:56
Right?
1:58
So I'm gonna set it and when I click send.
1:58
It's gonna run through our sign-in.
2:00
It's gonna pull the request off,
and it's gonna set the cookie.
2:03
Boom, and there it is.
2:06
It's set.
2:07
Okay?.
So
2:07
now you see that the user
name is craigsdennis.
2:08
And now, if I come back,
and I hit the homepage,
2:11
you'll see that the cookies
are still there.
2:15
And if we look back over
here at our network tab.
2:20
Let's look at that again.
2:25
Hit All.
2:27
Look at the local host page here.
2:29
You can see that the cookie has,
it's there, and it's available.
2:31
Let's make the homepage aware of whether
or not we've gathered their username.
2:35
So we need to make a model.
2:42
Right?
2:45
So let's make that same
model like we did before.
2:45
So we'll just do the same thing,
and we'll make a new map.
2:48
And it's a new map of key
values that are both strings.
2:50
And it's called model
2:56
And we'll make a new HashMap.
3:03
It's call String, String.
3:06
Okay, and we are going to put into our
model, we're gonna put a new value
3:12
called username, and
we're gonna pull that cookie.
3:16
So the way that you do that
is just like you might think.
3:19
You just say cookie, and
then the name of the cookie.
3:22
And that will get that value that's there.
3:24
Okay, and now our index.hbs
needs to know about the model.
3:28
And now our template knows
about the username value.
3:34
So let's use it, right?
3:37
Let's go and let's look at our.
3:39
Resources.
3:46
And we'll look in here.
3:48
We'll look under index.
3:49
And what we wanna do is we wanna only
say hello if we know their name.
3:54
So the way to do that in Handlebars is
to use what's known as a block helper.
3:58
So a block helper, you do a pound.
4:03
And the block helper here in this case is
something you're familiar with already.
4:06
It's called if.
4:10
So we're gonna say if username.
4:11
It's a little bit different
of an if than you're used to.
4:14
It's if that exists in the model,
that key exists in the model,
4:17
then run this code that's
inside these two if blocks.
4:22
So we're gonna say h1, Welcome, username.
4:26
Okay?
4:34
And then if we don't know what it is,
we wanna have a block called else.
4:35
So, in here there is an else.
4:40
Okay, and we can grab this code here,
and we can move it up.
4:46
So now what's happening is it comes in.
4:55
It says if there is a username
on the model, show this message,
4:58
Welcome username.
5:02
Otherwise show Welcome Students.
5:03
I better put the exclamation point here,
so they both get exclamationed.
5:04
All right, so let's go ahead and
we'll click run.
5:10
We'll do a run, and
we'll restart the server.
5:13
All right.
5:17
Let's look at our index page.
5:19
Awesome.
5:23
So that's using the first part of the if,
and it's using the cookie.
5:24
So we can prove that by if we
come over here to the Cookies.
5:27
If you click the Cookies in Chrome,
you can press Delete, and
5:30
now the site has no cookies.
5:34
And now if I refresh this page,
we'll see our form.
5:35
And we can put in our name.
5:40
That prompt is back.
5:49
We don't really need this page anymore,
do we?
5:51
We don't need this sign in page.
5:53
We could just drop them here.
5:56
Awesome.
6:00
By adding cookies to our bag of tricks,
6:00
we now have the core tool set used to make
a web application appear to be stateful.
6:03
You'll find these patterns
of forum submission and
6:09
storing values in cookies very relevant.
6:11
Now that you know these terms,
6:13
it's more a question of how
each framework implements them.
6:15
Try to remember, this is all just sitting
on top of HTTP and providing a nice to use
6:18
abstraction but really not doing
to much more at its core.
6:22
You should be able to start
understanding most web frameworks now.
6:26
We should have all the tools we need
to start building out the rest of our
6:30
application.
6:33
Let's go do that, and along the way I'll
show you some handy Spark specific tricks
6:34
right after these messages.
6:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up