Cookies and Applications

Setting and getting cookie values

Hono comes with a set of cookie helpers that make it easy to work with cookies. Let's start with a web application that returns the text "Hello cookies!" to the client. There is no cookie functionality in place so far.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";

const app = new Hono();

app.get("/", (c) => {
  return c.text("Hello cookies!");
});

Deno.serve(app.fetch);

Hono has a helper library at https://deno.land/x/hono@v3.12.11/helper.ts, which provides functionality for setting, getting, and deleting cookies. Let's import the functions getCookie and setCookie from the library, and set a cookie to the response. The function setCookie takes three parameters -- the first one is the context, the second one is the name of the cookie, and the third one is the value of the cookie. Let's use the function to set a cookie called "count" with the value of "1".

Cookie names and values are strings.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";
import {
  getCookie,
  setCookie,
} from "https://deno.land/x/hono@v3.12.11/helper.ts";

const app = new Hono();

app.get("/", (c) => {
  setCookie(c, "count", "1");
  return c.text("Hello cookies!");
});

Deno.serve(app.fetch);

Now, when we make a request to the server, the response contains a Set-Cookie header with the cookie name and value.

curl -v localhost:8000
...
< HTTP/1.1 200 OK
< set-cookie: count=1
...
Hello cookies!

Let's continue by adding functionality for reading the cookie value from the request. This is done with the function getCookie, which takes two parameters -- the first one is the context, and the second one is the name of the cookie. Let's use the function to read the cookie called "count" from the request, and add the value to the response.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";
import {
  getCookie,
  setCookie,
} from "https://deno.land/x/hono@v3.12.11/helper.ts";

const app = new Hono();

app.get("/", (c) => {
  let count = getCookie(c, "count");  setCookie(c, "count", "1");
  return c.text(`Hello cookies! -- ${count}`);});

Deno.serve(app.fetch);

Now, when we make a request to the server, the response contains a Set-Cookie header with the cookie name and value and a text "Hello cookies! -- undefined".

curl -v localhost:8000
...
< HTTP/1.1 200 OK
< set-cookie: count=1
...
Hello cookies -- undefined!

The "undefined" is there because the cookie is not set in the request, and thus it cannot be found. Let's fix that by adding a cookie to the request.

curl -v -H "Cookie: count=1" localhost:8000
...
< HTTP/1.1 200 OK
< set-cookie: count=1
...
Hello cookies -- 1!

Updating cookie values

Updating cookie values involves both getting and setting the cookie value. If a cookie value exists, we update that, while if the value does not exist, we set it. In the following example, we set the count to 0 if the cookie does not exist, while otherwise using the value of the cookie. Then, we increment the value of the cookie by one (the Number(count) is used to transform the string to a number), and set the cookie value.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";
import {
  getCookie,
  setCookie,
} from "https://deno.land/x/hono@v3.12.11/helper.ts";

const app = new Hono();

app.get("/", (c) => {
  let count = getCookie(c, "count") ?? 0;  count = Number(count) + 1;  setCookie(c, "count", `${count}`);  return c.text(`Hello cookies! -- ${count}`);
});

Deno.serve(app.fetch);

Now, on the first request, the count is 1 and the value of the count cookie is set to 1. On the next request, the count is retrieved from the cookie, incremented by one, and the cookie value is set to 2. On the third request, the count is retrieved from the cookie, incremented by one, and the cookie value is set to 3. And so on.

curl -v -H localhost:8000
...
< HTTP/1.1 200 OK
< set-cookie: count=1
...
Hello cookies -- 1!
curl -v -H "Cookie: count=1" localhost:8000
...
< HTTP/1.1 200 OK
< set-cookie: count=2
...
Hello cookies -- 2!
curl -v -H "Cookie: count=2" localhost:8000
...
< HTTP/1.1 200 OK
< set-cookie: count=3
...
Hello cookies -- 3!