Bootcamp
Search…
3.5.1: Cookies
Introduction
Cookies are a browser-side feature that will hold onto data received by servers and send it in subsequent requests.
Headers
Specifically cookies are keyed to specific response headers and request headers.
If the browser receives a properly-formatted response header, it will store a given set of cookie data.
On every new subsequent request on the same domain, it will send that data back in the header of the request.
Cookie Setting and Sending Order:
- 1.The browser receives a response back from the server. This response header has the
Set-Cookiekey in it. TheSet-Cookiekey's value is a set of keys and values that contain cookie data and metadata. - 2.The browser stores that set of keys and values.
- 3.The browser makes another request to that domain. Inside the request headers are the cookie keys and values.
The most important part of this mechanic to understand is that the instruction to set the cookie is in the response header to a request.
Incognito Mode
The defining characteristic of Incognito Mode is that its cookie environment is separate from the non-Incognito cookie environment (i.e., cookies are not mixed between the two). Every new Incognito window has a new cookie environment.
Open Incognito mode and open the Dev Tools. Go to https://www.google.com/ and look in the Network tab.
Look for the
Set-Cookie header in the response. Look in the request header. It doesn't say anything about cookies.
Look in the request headers to see the cookies that the browser was previously instructed to hold, being sent back.
Look in the Application tab to see the set of all cookies for this domain. Click around the www.google.com domain to see that these cookies are being sent on every subsequent request.
Curl
Send a cookie with
curl. This is to test our server's cookie-receiving functionality without having to use the browser environment. -v stands for verbose. myAuthToken and myAdsTrackingId are fictional cookies.1
curl -v --cookie "myAuthToken=123;myAdsTrackingId=456" http://localhost:3000/recipe/1
Copied!
Express
Create a GET route for each of the cookie actions below. Check the Chrome Dev Tools Application tab after each request.
Response: Set a cookie
1
response.cookie('name', 'tobi');
2
response.cookie('weight', '230');
Copied!
Response: Delete a cookie
1
response.clearCookie('name');
Copied!
Request: Receive a cookie
Notice that the cookie value in the header is all the cookies together in a single string. Express pre-parses request headers for us and puts all cookie headers into the
request.headers.cookie attribute.1
console.log(request.headers);
2
console.log(request.headers.cookie);
Copied!
Exercises
Log Out by Deleting Cookies
Go to the Application tab of the Chrome Dev Tools. Navigate to a website that you have a login for, and remember the password to.
Delete all the cookies for this domain to see that you get logged out.
Clear Shopping Cart by Deleting Cookies
Open an incognito tab and go to amazon.com. Add something to the shopping cart.
Go to the Application tab of the Chrome Dev Tools. Delete all the cookies for Amazon and refresh the page. Your cart will empty.
Count User Visits
Set a cookie each time a user visits the URL /home.
1
app.get('/home', (request, response) => {
2
response.cookie('visits', 1);
3
response.send(`Current cookie key and value: visits: ${visits}`);
4
});
Copied!
In order to "count" the visits we'll increment the current value of the cookie for every request.
We need to install a library
cookie-parser to parse the cookie string value in the header into a JavaScript Object. More information on cookie-parser functionality here.1
npm install cookie-parser
Copied!
Configure it:
1
import cookieParser from 'cookie-parser';
2
3
app.use(cookieParser());
Copied!
This creates a separate key inside of
request.cookies for every cookie inside of the request. In this case, we care about the visits cookie.1
console.log(request.cookies.visits);
Copied!
Update application logic so that the value in the visits cookie increases with each request.
1
let visits = 0;
2
3
// check if it's not the first time a request has been made
4
if (request.cookies.visits) {
5
visits = Number(request.cookies.visits); // get the value from the request
6
}
7
8
// set a new value of the cookie
9
visits += 1;
10
11
response.cookie('visits', visits); // set a new value to send back
12
13
response.send(`Current cookie key and value: visits: ${visits}`);
Copied!
Further Reading
Past students have found these videos helpful in understanding cookies.
Last modified 2mo ago