JavaScript e Cookies

Articles

Este artigo explica JavaScript e cookies.

Vamos explicar tudo cuidadosamente, passo a passo, desde o básico dos cookies, leitura e escrita, segurança, até exemplos práticos.

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScript e Cookies

Cookie refere-se a pequenos pedaços de dados armazenados no navegador do usuário. Eles são usados principalmente para os seguintes propósitos:.

Autenticação do usuário (manter o estado de login)
Salvar configurações do usuário (idioma, tema, etc.)
Rastreamento (histórico de navegação, etc.)

No JavaScript, você pode ler e escrever cookies usando document.cookie.

Criando (escrevendo) cookies

Cookies são criados com a seguinte sintaxe:.

1document.cookie = "username=JohnDoe";

Este código salva um cookie chamado "username=JohnDoe" no navegador.

Criando cookies com data de expiração

Os cookies podem ter uma data de expiração definida. Se nenhuma data de expiração for definida, ele é tratado como um cookie de sessão e é excluído quando o navegador é fechado.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

O atributo expires especifica a data de expiração do cookie em formato UTC.
O atributo path especifica o caminho para o qual o cookie será enviado. / significa todo o site.
Se você especificar SameSite=None, o Cookie será enviado mesmo em requisições entre sites diferentes. No entanto, neste caso, você deve sempre incluir o atributo Secure.
Ao especificar Secure, o Cookie fica restrito apenas à comunicação HTTPS, aumentando a segurança.
Ao acessar document.cookie, você pode obter todos os Cookies disponíveis na página atual como uma única string.
Utilizando o console.log, você pode verificar a diferença entre os valores reais dos Cookies definidos no navegador e os valores que podem ser recuperados.

Obtendo (lendo) cookies

Você pode recuperar todos os cookies como uma string usando document.cookie.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

O valor retornado por document.cookie é uma única string na qual todos os Cookies estão concatenados no formato 'chave=valor;'.
É conveniente usar uma função para analisar esta string e extrair o valor desejado.

Função para obter o valor de um cookie

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

Esta função divide as chaves e valores usando split() e retorna o valor se corresponder à chave especificada.
Ao usar decodeURIComponent, é possível recuperar corretamente os caracteres codificados.
Se a chave correspondente não existir, retorna null.

Excluindo cookies

Um cookie pode ser excluído configurando sua data de expiração para uma data no passado.

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

Atribuindo um valor vazio a username e definindo a data de expiração para o passado, ele será excluído.
Ao excluir um Cookie, você também deve corresponder os atributos path, SameSite e Secure aos que foram usados na sua criação.
Neste exemplo, username é excluído e outros Cookies, como theme=dark, permanecem.

Opções de cookie

Você pode especificar várias opções para controlar o comportamento de um cookie. As principais são as seguintes:.

expires Especifica a data de expiração do cookie em formato UTC. Se não for especificado, o cookie se torna um cookie de sessão e é excluído quando o navegador é fechado.
max-age Especifica a data de expiração do cookie em segundos. Isto tem precedência sobre expires.
path Especifica o caminho para o qual o cookie será enviado. Por exemplo, se você especificar /admin, o cookie será enviado apenas para páginas nesse caminho.
domain Especifica o domínio para o qual o cookie é válido. Normalmente, é definido para o domínio atual, mas você pode aplicá-lo a todos os subdomínios, como .example.com.
secure Quando este atributo é especificado, o cookie é enviado apenas via HTTPS. Para maior segurança, sempre defina este atributo para informações sensíveis.
SameSite Controla se os cookies são enviados em solicitações entre sites. Você pode especificar um dos três valores a seguir:.
- Strict Cookies são enviados apenas para solicitações do mesmo site.
- Lax Cookies são enviados para navegação normal, mas com algumas limitações.
- None Cookies podem ser enviados até mesmo para solicitações entre sites. No entanto, o atributo Secure também é necessário.

Exemplo: Cookie seguro

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

Se você especificar secure, o Cookie só será enviado por comunicações via HTTPS.
Se você especificar SameSite=Strict, o Cookie não será enviado para requisições entre sites, sendo eficaz como medida de proteção contra CSRF.
Esses atributos de segurança são essenciais para Cookies importantes usados para autenticação ou gerenciamento de sessão.

Codificação e decodificação

Como os valores dos cookies podem conter caracteres especiais, é mais seguro usar encodeURIComponent.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

Ao usar encodeURIComponent, você pode armazenar espaços, símbolos e afins com segurança em um Cookie.
Ao lê-lo, utilize decodeURIComponent para recuperar a string original.
Neste exemplo, max-age=604800 é usado para definir o período de expiração para 7 dias (604.800 segundos). Este é um método para especificar a data de expiração, semelhante ao uso de expires. max-age pode ser especificado em segundos e muitas vezes é mais fácil de usar.

Exemplo prático: Salvando e carregando um tema

A seguir, um exemplo de salvar o tema selecionado pelo usuário em um cookie e aplicá-lo automaticamente na próxima visita.

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

A função setTheme salva o tema selecionado em um Cookie e chama imediatamente applyTheme para atualizar a tela.
A função applyTheme altera as cores de fundo e de texto do body de acordo com o tema.
Neste exemplo, como max-age=604800 está definido, a configuração do tema será mantida por uma semana.
Como a seleção do usuário é mantida ao revisitar a página, a experiência do usuário (UX) é aprimorada.

Limitações e cuidados com cookies

Esteja atento aos seguintes pontos ao usar cookies:.

Limitações de tamanho O tamanho de um cookie individual é limitado a cerca de 4KB.
Limite no número de cookies que podem ser salvos Dependendo do navegador, só é possível salvar cerca de 20 a 50 por domínio.
Precauções de Segurança O conteúdo dos Cookies é basicamente salvo em texto simples, portanto não é adequado para armazenar informações confidenciais, como senhas.
Cookies inacessíveis pelo JavaScript Cookies com o atributo HttpOnly não podem ser lidos pelo JavaScript por motivos de segurança.

Servidor e `Cookies`

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

Alguns atributos de Cookie, como HttpOnly, não podem ser definidos via JavaScript. Esses devem ser definidos no lado do servidor.

Resumo

Manipular Cookies com JavaScript pode melhorar a experiência do usuário e manter o estado. No entanto, por favor, leve em consideração os pontos a seguir para tratá-los de forma segura e adequada.

Armazene apenas as informações mínimas necessárias Do ponto de vista da privacidade e segurança, evite armazenar informações pessoais ou sensíveis e registre apenas os dados necessários.
Defina adequadamente os atributos de segurança Defina atributos como Secure e SameSite para evitar ataques entre sites, como XSS e CSRF.
Codificação e Decodificação de Dados Use encodeURIComponent e decodeURIComponent para armazenar e ler valores de Cookie com segurança, garantindo o correto tratamento de caracteres especiais e japonês.

Ao aprender o modo correto de usar Cookies, você poderá construir aplicações web mais avançadas e seguras.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Shared Worker em JavaScript JavaScript e `Web Storage`

JavaScript e Cookies

YouTube Video

JavaScript e Cookies

Criando (escrevendo) cookies

Criando cookies com data de expiração

Obtendo (lendo) cookies

Função para obter o valor de um cookie

Excluindo cookies

Opções de cookie

Exemplo: Cookie seguro

Codificação e decodificação

Exemplo prático: Salvando e carregando um tema

Limitações e cuidados com cookies

Servidor e Cookies

Resumo

YouTube Video

Servidor e `Cookies`