Using Cookies with Express in Node.js

This past week in the immersive program for Viking Code School we covered topics in advanced Express, including how to use cookies. No, not the tasty, edible cookies, but the ones that keep track of data while you are browsing the internet.

In the past, there was really no good method to store the state of your browsing. A visit to a website remained stateless meaning that the site responded to each visit and page load without any memory of who you were or previous actions. Cookies, small amounts of data stored in the browser, were created to solve this problem and owe their name to fortune cookies — the treat associated with Chinese food that contain small messages. Cookies allow for persistence during your browsing sessions and create a stateful experience on the web.

Cookies are used across the internet today to store things like logins, personalization, display settings, and tracking. They’re how Amazon or Facebook remembers your username or login information when you return on the same computer. Ever wonder how an online store remembers what you were looking at a few weeks ago? Well, cookies are responsible for all those personalized ads.

Using cookies in Express and Node is an easy process to learn. First, you’ll have to install the cookie parser middleware using:

In the index.js or similar file to start your Node server, you’ll have to require the cookie-parser as part of your boilerplate code:

Then use the cookie parser on express (here included as app):

Cookies are created using the res.cookie() function, which takes at least two parameters — the first being the name for the new cookie and the second as its value. In the following example, the cookie is set to “goodevil” and takes in the value of the goodevil key in the body of a POST request:

Once a cookie is established, the cookie parser is used to read it and use it in whatever way is needed. In the next example, the cookie we created called “goodevil” is called upon to be the value of a handlebars variable called goodEvil, rendered in a page called garden:

An important distinction to be made here is that when using req on the cookie, the syntax becomes the plural “cookies” rather than the singular “cookie” used with res when setting the cookie.

With the single cookie parser middleware and the simple functions connected to it, numerous different actions and manipulations can be taken with user created cookie data. Data from forms, button clicks, and urls can all be assigned a cookie value. An important aspect of cookie use to keep in mind is that every time a request to the server is made, the cookie is being resent, so you should always strive to keep the size of cookies small (under 4MB). If you have large amounts of user data to access, consider storing it on the server side in an object that can be identified by a single ID that can be stored in the cookie.

In one of the projects for Viking, a CSS garden of good and evil was created relying heavily on these basic cookie functions. Cookies were created from a user form in which several different options were chosen. These cookies then allowed that data to persist and be used to determine the CSS utilized and images displayed on a resulting page. You can check out the full project at my GitHub repo here. This is just a short introduction to the use of cookies, but opens up a great deal of potential applications within back-end programming.