"CSS Basics (2014)" was retired on July 12, 2021. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Express Basics!
You have completed Express Basics!
Preview
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