Como você aprendeu nas lições anteriores, cookies são dados simples que sites podem armazenar no dispositivo do usuário. No entanto, você pode realmente armazenar estruturas de dados mais complexas em cookies. Um método comum é usar JSON para armazenar objetos ou arrays. Aqui está um exemplo:

const userData = {
  name: "John Doe",
  age: 30,
  role: "admin"
};

document.cookie = "userInfo=" + JSON.stringify(userData) + "; path=/";

Neste exemplo, estamos criando um objeto com dados do usuário, convertendo-o em uma string JSON e então armazenando-o em um cookie. Quando queremos recuperar esses dados, podemos analisar a string JSON em um objeto usando JSON.parse(). Agora, você pode estar se perguntando sobre o aspecto dos "HTTP headers" do nosso tópico. Normalmente, os cookies são definidos pelo servidor usando cabeçalhos HTTP. Por exemplo, um servidor pode enviar um cabeçalho assim:

Set-Cookie: username=John Doe; expires=Thu, 31 Dec 2024 6:00:00 IST; path=/

Este cabeçalho informa ao navegador para definir um cookie. Também podemos definir cookies diretamente no navegador usando JavaScript. Isso é útil para armazenar dados que não precisam ser enviados para o servidor imediatamente. Observe que os cookies têm um limite de tamanho de cerca de 4KB e armazenar muitos dados neles pode deixar seu aplicativo web mais lento. Armazenar grandes quantidades de dados em cookies pode aumentar o tráfego de rede, pois os cookies são enviados com cada requisição HTTP.