Cookies 🍪 — JS: Desarrollo web

Cookie (galleta) es un mecanismo del protocolo HTTP que el navegador utiliza para almacenar datos. Permiten rastrear o identificar a visitantes recurrentes. Por ejemplo, las tiendas en línea los usan para recordar qué se ha añadido al carrito. En esta lección, exploraremos este tema con más detalle y aprenderemos cómo trabajar con cookies en JavaScript.

Para trabajar con cookies en Fastify, hay un paquete cookie-parser que se conecta como middleware.

npm i @fastify/cookie

import fastify from 'fastify';
import fastifyCookie from '@fastify/cookie';

const app = fastify();
const port = 3000;

await app.register(fastifyCookie);

app.get('/cookies', (req, res) => {
  console.log(req.cookies);

  res.send();
});

app.get('/', (req, res) => {
  res.cookie('test', 'value');
  res.send();
});

app.listen({ port }, () => {
  console.log(`Example app listening on port ${port}`);
});

El trabajo con cookies en Fastify consta de varios métodos. Consideremos dos principales:

• req.cookies: un objeto que contiene todas las cookies. Los datos están disponibles si la cookie fue enviada desde el navegador junto con la solicitud.
• res.cookie('name', 'value'): establece una cookie con el nombre y el valor necesarios. Si la cookie existía, será reemplazada. Este es el comportamiento estándar de HTTP.

Por ejemplo, supongamos que mostramos al usuario algún mensaje hasta que lo cierre. Este enfoque a menudo se usa durante la familiarización con la interfaz del proyecto, cuando se muestra la ayuda primero, pero se puede eliminar.

El cierre en estos casos se realiza a través del código de JavaScript. Para simplificar, ocultaremos el bloque automáticamente después de actualizar la página. En otras palabras, el bloque solo se mostrará en la primera visita al sitio.

import fastify from 'fastify';
import pug from 'pug';
import fastifyCookie from '@fastify/cookie';
import view from '@fastify/view';

const app = fastify();
const port = 3000;

await app.register(fastifyCookie);

await app.register(view, { engine: { pug }, root: 'src/views' });

app.get('/', (req, res) => {
  const visited = req.cookies.visited;
  const templateData = {
    visited,
  };
  res.cookie('visited', true);

  res.view('index', templateData);
});

app.listen({ port }, () => {
  console.log(`Example app listening on port ${port}`);
});

Las cookies solo funcionan con datos de texto, por lo que deben convertirse a cadena antes de enviar y volver a convertir al leer. Para los datos primitivos, es suficiente utilizar el método valueOf. Con datos compuestos, es más fácil hacer una conversión a JSON y viceversa.

En el ejemplo anterior, primero leemos y luego configuramos. En la primera visita al sitio web, leer una cookie no configurada devolverá undefined. Esto indica que el usuario ha visitado el sitio por primera vez. La segunda vez el resultado será true, porque la configuración de la cookie ocurrió en la primera carga. Solo necesitamos usar esta información en la plantilla:

html(lang="es")
  head
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    title Hello Códica!
  body
    main
      h1 Hello Códica!
      if !visited
        | Este mensaje solo se muestra una vez. Si quieres verlo de nuevo, borra las cookies

Trabajo independiente

1. Realiza todos los pasos del tutorial en tu computadora.
2. Inicia la aplicación y abre el panel de desarrollador en tu navegador. Verifica qué cookies se establecen durante el funcionamiento de la aplicación. Puedes ver las cookies abriendo el panel Application -> Cookies.
3. Sube los cambios a GitHub.