Bootcamp
Search…
3.ICE.4: Cookies

Introduction

Practise using cookies to understand how they work.

Setup

  1. 1.
    Start with one person's noodle app from 3.POCE.2: Express, EJS Noodle App.
  2. 2.
    Install the Cookie Parser NPM Library​
  3. 3.
    Import and bind the Cookie Parser middleware to our Express app like in the following code snippet.
    1
    import cookieParser from 'cookie-parser';
    2
    3
    app.use(cookieParser());
    Copied!

Base

Incognito

Open an incognito window and visit a popular website. What cookies are being set?
Close the window and open a new one and visit a different site. Are any cookies the same? Or different?

Favorite

Add favorite to the recipes app.
Add a link on the recipe page /recipe/:index that takes the user to /favorites. Pass a query parameter to the server that says which recipe is being "favorited".
When this request is received, send back a Set-Cookie with the value of the recipe index inside. Redirect the user back to the original recipe page.
When the user visits the home page ("/" route), use the value inside the cookie to display the user's favorite recipe.

Comfortable

Favorites

The user can have a list of favorites. The data that is saved in the cookie must be a string, but it must be structured. We can use JSON for this. Express automatically converts array and object cookie values to and from strings, so we do not need to manually call JSON.stringify or JSON.parse. Any time the user clicks the link, add the relevant recipe to the list of favorite recipes.

More Comfortable

Favorite List Management

Give the user the ability to clear his entire list of favorites by erasing the cookie.