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
HTTP is a stateless protocol. Learn more about what that means, and how to save state.
Documentation
- GitHub page for cookie-parser
- Documentation for res.cookie()
- Documentation for req.cookies()
-
HTTP cookies (MDN article)
Further Resources for Storing State
-
Using Local Storage with JavaScript (Treehouse workshop)
-
Using SQL and Node.js with Sequelize (Treehouse workshop)
-
SQL Basics (Treehouse Course)
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
In the next few videos,
we'll add another page to our app.
0:00
We´ll add a welcome page,
0:04
that's our form will move to
after a user submits the name.
0:06
If I enter my name here, you can see
that I´m greeted by the app as before.
0:14
But notice, in the address bar, we're no
longer on the hello URL but the root URL.
0:20
The app has moved me to the welcome page.
0:28
When I'm ready, I can click on the Goodbye
button, which is actually another form.
0:31
And then I'm ushered
back to the hello page.
0:37
This is a little closer to
how forms normally work.
0:42
When you submit them,
you are often moved to another page,
0:46
though what page will depend on your app.
0:51
To learn how to implement this feature we
need to talk a little more about HTTP.
0:54
HTTP is called a stateless protocol.
1:01
This fundamental principle
of HTTP means that
1:04
the server doesn't track the relationship
between one request and another.
1:07
Each transaction with
a server is independent and
1:11
unrelated, at least from
the server's perspective.
1:15
Here's a simple example to
help you think about state.
1:19
Consider a web form,
as you fill it out, you set the text,
1:22
check boxes, and
other inputs to hold information.
1:27
The information you enter
is the state of the form.
1:31
You've probably have the experience of
setting the state of a form of filling it
1:35
out and accidentally refreshing
the page or hitting the back button.
1:39
As you probably know, the form will
be clear when it reappears and
1:44
you have to fill it in all over again.
1:49
In fact, each time you visit the form,
it's the same empty form.
1:52
It doesn't remember your name, address, or
1:57
any other information that you
may have told it in the past.
2:00
You always have to put
that information back in.
2:04
That's because forms don't retain
the state between refreshes, or
2:07
at least by default.
2:11
Clients and
servers have stateless interactions.
2:13
A server retains no memory of
the client after sending a response,
2:16
no matter how recently or
often they interact.
2:21
This means a client has to send complete
information to the server every time it
2:24
makes a request.
2:29
Tracking state often takes a lot
of architecture and memory.
2:31
So by avoiding it altogether, the web has
been able to grow to a massive scale.
2:34
But sometimes applications need to
remember previous interactions.
2:41
In other words, sometimes we need
to save the state of a request and
2:46
remember it later.
2:51
For example,
consider an online shopping cart.
2:53
When you put something into your cart,
2:57
you want it to stay there even if
you visit another product page.
2:59
With a purely stateless system,
your cart would be always empty.
3:04
You need some way of
tracking your purchases.
3:09
One of the earliest and
still most common methods for
3:12
saving states on the web is a cookie.
3:15
A cookie is a piece of data that
the service stores on the client, for
3:19
example, in your web browser.
3:22
After receiving the cookie information
from the server, when the client makes
3:25
another request of the server, the client
sends the cookie information too.
3:28
It will even send other cookies that have
been previously set perhaps by other web
3:34
pages on that site.
3:38
This way,
the client can remind the server of
3:40
any information it should
hand back in its response.
3:43
So for example,
when a user puts some item into the cart,
3:47
the server writes an item into a cookie.
3:51
And it hands it back to
the client in the response.
3:55
The next time the client sends a request,
it includes the cookie.
3:58
This way the server can continue
to include the item in the cart.
4:03
One more note about cookies.
4:08
They are stored in your browser by domain.
4:10
This means that one domain cannot
access another domain's cookies.
4:13
For example, Netflix can't see
cookies set by Amazon or vice versa.
4:17
The cookies stored by that domain
are private to that domain.
4:23
Let's see how to use cookies to
remember our app's current user.
4:28
We can use the cookie method
on Express's response object.
4:34
The cookie method takes a name and
a value.
4:39
You can also pass in an options
object as a third parameter.
4:45
All the options you can use
are listed in the table below.
4:51
Further down, there is some code examples.
4:54
Our use case is pretty simple, so
we'll just use the first two arguments.
4:57
In the app.js file,
5:04
let's set the cookie when the user
submits the form to the post route.
5:05
We'll call the name,
the string of username.
5:12
This will send a cookie to
the browser after we submit the form.
5:25
Let's go to the browser now and
open up DevTools, if you haven't already.
5:29
This is where we can see
if the cookie is set.
5:34
In the application tab,
on the left-hand side, we have Cookies.
5:38
Right now, we have no cookies for
this site.
5:45
If I refresh the form, And
5:49
enter my name, and hit Submit.
5:54
You can see the cookie is now set.
6:00
Now the browser will automatically send
this cookie with every request it makes.
6:03
At this point though, our app isn't
reading the cookie it's getting back.
6:11
Let's read the cookie and
6:16
share the user's name when the user
makes a get request to this route.
6:18
To read the cookie from the request,
6:23
we need the cookie's property
on the request object.
6:26
Looking at the documentation,
we'll need another piece of middleware
6:30
that reads the cookies,
called cookie-parser.
6:35
After we connect
the cookie-parser middleware,
6:39
we can read cookies much the same
way as we did with the request
6:42
body parameter earlier
to read the form data.
6:46
Let's go to the console and
install cookie-parser.
6:51
Then I'll add it to the app.js
file like I did the body-parser.
7:00
Cookie-parser is simpler to add though.
7:14
I can just call the function directly and
provide it to the app.
7:18
Now down in the get hello route, we can
provide it to the template as a variable.
7:26
Just like we did in the post routes.
7:32
This time though, we're going to read
it out of the cookie we've just set.
7:35
Let's see what happens in the browser.
7:44
If we send a fresh get request to
the hello URL, we get the greeting.
7:47
So our app is reading
the cookie correctly.
7:54
Just to drive the point home,
I'll open up a second tab,
7:57
going to the same URL, and
we get the greeting too.
8:03
I'll close this tab now.
8:08
Let's clear the cookie from
the browser's cookie store.
8:10
If we open up the DevTools and
8:14
go back to the cookies page,
I can clear the cookies with this button.
8:15
Again, I'll send a get request.
8:20
Now when I refresh the app,
I get the form.
8:25
I enter into it a new name,
And get a greeting.
8:29
Again, I'll send another get request,
8:35
And I get the new name in this greeting.
8:44
Keep in mind that cookies are just
one way to save states and
8:47
it's one of the simpler ways that
are available to developers.
8:53
Databases and other different browser
storage called session storage
8:57
are examples of other commonly
used ways to save state.
9:02
We will get into those in this course but
check the Teacher's Notes for
9:06
more if you're interested.
9:10
Just another note about cookies.
9:13
It's best not to store sensitive data
in them because they're in plain text.
9:15
So don't save passwords or
credit card information.
9:21
Great, we have successfully
saved state with our app.
9:25
At this point, there's no way to clear
the cookie without using DevTools,
9:29
that's okay.
9:33
I'll show you how to do that
in the next video, as well as,
9:34
how to redirect your users to
different routes in your app.
9:37
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