Cookies — JS: Веб-разработка

Куки (cookies) — это механизм протокола HTTP, который браузер использует для хранения данных браузером. Они позволяют отслеживать или идентифицировать возвращающихся посетителей. Например, с их помощью интернет-магазины запоминают, что добавлено в корзину. В этом уроке мы изучим эту тему подробнее и выясним, как происходит работа с куками в JavaScript.

Для работы с куками в Fastify есть пакет cookie-parser, который подключается как мидлвара.

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}`)
})

Вся работа с куками в Fastify состоит из нескольких методов. Рассмотрим два основных:

• req.cookies — объект, который содержит все куки. Данные доступны, если кука была отправлена из браузера вместе с запросом.
• res.cookie('name', 'value') - устанавливает куку с нужным именем и значением. Если кука существовала, она будет перезаписана. Это стандартное поведение HTTP.

Для примера представим, что мы показываем пользователю какое-то сообщение до тех пор, пока он его не закроет. Такой подход часто используется во время знакомства с интерфейсом проекта, когда сначала показывается справка, но ее можно убрать.

Закрытие в таких случаях реализуется через JavaScript-код. Чтобы не усложнять, мы сделаем скрытие блока автоматически после обновления страницы. Другими словами, блок будет показывать только при первом заходе на сайт.

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}`)
})

Куки работают только с текстовыми данными, поэтому их нужно привести к строке во время отправки и выполнить обратное преобразовании при чтении. Для примитивных данных достаточно использовать метод valueOf. С составными данными проще всего выполнять преобразование в JSON и обратно.

В примере выше мы сначала читаем и только затем устанавливаем. При первом заходе на сайт чтение неустановленной куки вернет undefined. Это показывает, что пользователь зашел на сайт первый раз. Во второй раз результатом будет true, потому что установка куки произошла на первую загрузку. Осталось использовать эту информацию в шаблоне:

html(lang="ru")
  head
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    title Hello Hexlet!
  body
    main
      h1 Привет Хекслет!
      if !visited
        | Это сообщение показывается только один раз. Если вы хотите увидеть его снова, сотрите куки

Самостоятельная работа

1. Проделайте все шаги из урока у себя на компьютере

2. Запустите приложение и откройте панель разработчика в вашем браузере. Проверьте, какие куки устанавливаются в процессе работы приложения. Куки можно посмотреть, открыв панель Application -> Cookies

3. Залейте изменения на GitHub