Então, o que são cookies? Cookies são basicamente pequenos pedaços de texto que contêm algumas informações relevantes para você ou para o site que você está visitando. Essas informações são armazenadas em seu navegador e permitem que os sites ofereçam uma experiência personalizada, acesso a seções protegidas do site ou coleta de dados analíticos.
Neste tutorial, mostrarei como gerenciar cookies com JavaScript.
Lendo informações de cookies em JavaScript
o Document interface contém uma propriedade chamada cookie que você usa para ler e gravar cookies. Simplesmente usando document.cookie retornará uma string que contém todos os seus cookies separados por ponto e vírgula. O exemplo a seguir mostra todos os cookies definidos em meu navegador para a página inicial da Wikipédia.
1 |
let all_cookies = document.cookie; |
2 |
|
3 |
console.log(all_cookies); |
4 |
/* Outputs:
|
5 |
GeoIP=IN:State_Code:State:My_Latitude:My_Longitude:v4; enwikiwmE-sessionTickLastTickTime=1675054195383; enwikiwmE-sessionTickTickCount=1; enwikimwuser-sessionId=7ed98fe7399e516cff54
|
6 |
*/
|
Fechei a página e reabri depois. Após algumas atualizações e algum tempo de espera, o valor armazenado nos cookies mudou para o seguinte:
1 |
let all_cookies = document.cookie; |
2 |
|
3 |
console.log(all_cookies); |
4 |
/* Outputs:
|
5 |
GeoIP=IN:State_Code:State:My_Latitude:My_Longitude:v4; enwikimwuser-sessionId=7ed98fe7399e516cff54; enwikiwmE-sessionTickLastTickTime=1675058494564; enwikiwmE-sessionTickTickCount=16
|
6 |
*/
|
Como você pode ver, os valores nos cookies podem mudar com o tempo. Os sites podem usá-los para rastrear coisas como quanto tempo passei em uma página, etc.
O valor retornado por document.cookie mostra que apenas recuperamos o nome e o valor dos cookies armazenados no navegador. Vamos escrever uma função JavaScript que nos dará o valor de um cookie armazenado assim que passarmos seu nome.
1 |
function read_cookie(name) { |
2 |
let all_cookies = document.cookie.split("; "); |
3 |
let cookie_name = name + "="; |
4 |
|
5 |
for (let i = 0; i < all_cookies.length; i++) { |
6 |
let clean_cookie = all_cookies[i]; |
7 |
if (clean_cookie.startsWith(cookie_name)) { |
8 |
return clean_cookie.substring(cookie_name.length, clean_cookie.length); |
9 |
}
|
10 |
}
|
11 |
}
|
Atualmente, existem quatro cookies na Wikipedia que posso acessar usando JavaScript. eu usei o nosso read_cookie() função para obter os valores de todos eles. O valor do cookie GeoIP mostra que o local é Nova York porque é mascarado pela minha VPN. Você pode tentar usar a função acima na Wikipedia ou em qualquer outro site para recuperar os valores dos cookies:
1 |
let geo_ip = read_cookie("GeoIP"); |
2 |
// Outputs: US:NY:New_York:40.74:-73.99:v4
|
3 |
|
4 |
let session_id = read_cookie("enwikimwuser-sessionId"); |
5 |
// Outputs: 398c37df147f0b377825
|
Criando Cookies em JavaScript
Você também pode criar um novo cookie usando o cookie propriedade e definindo seu valor para uma string que tem o formato key=value. o key aqui está o nome do cookie e value é o valor que você definiu para o cookie. Esses são os únicos valores necessários para criar um cookie, mas você também pode passar outras informações importantes.
Para ver como funciona a configuração de um valor de cookie, você pode visitar https://code.tutsplus.com/tutorials e abra o console do navegador para executar o seguinte código:
1 |
document.cookie = "site_theme=christmas"; |
Definindo o tempo de expiração
A menos que especificado de outra forma, os cookies que você define são projetados para expirar no final de uma sessão de navegação quando os usuários fecham o navegador. Se você deseja que seu cookie expire em um momento específico no futuro, defina uma data de expiração adicionando a seguinte string ao seu cookie.
1 |
;expires:GMT-string-fromat-date |
Nosso site_theme o cookie acima está definido para expirar assim que você fechar o navegador. Você pode verificar isso fechando o navegador e tentando ler o cookie usando o read_cookie() função que escrevemos acima. Podemos estender sua vida útil usando o seguinte trecho de código:
1 |
document.cookie = "site_theme=christmas;expires=Thu, 28 Dec 2023 08:58:01 GMT"; |
2 |
// The cookie will now expire on Thu, 28 Dec 2023 08:58:01 GMT
|
O cookie agora expirará em 28 de dezembro de 2023. Tente fechar a janela do navegador e abra a página novamente para ver se o cookie ainda está disponível para você ler.
Outra maneira de definir o tempo de expiração do cookie é usando a seguinte string:
1 |
;max-age=cookie-age-in-seconds |
Digamos que você queira que o cookie expire uma semana depois de ter sido definido. Você pode determinar o número de segundos calculando 60*60*24*7. A linha a seguir definirá o cookie para você:
1 |
document.cookie = `site_theme=christmas;max-age=${60*60*24*7}`; |
2 |
// The cookie will now expire one week from now
|
Você pode definir o expires valor quando você deseja que o cookie expire em um ponto específico do tempo e o max-age valor quando você deseja que o cookie expire após um período específico.
Definindo o domínio e o caminho
É importante lembrar que você não pode definir cookies para nenhum domínio de terceiros que desejar. Por exemplo, um script em execução em tutsplus.com não pode definir um cookie para wikipedia.org. Isso é feito como uma medida de segurança.
Você pode ter ainda mais controle sobre a acessibilidade de um cookie definindo sua domain e path valores. Você pode definir esses dois valores usando a seguinte string:
1 |
;domain=domain;path=path |
O domínio é definido como o host do local atual por padrão. Como criamos nossos cookies anteriores abrindo o console do navegador em https://code.tutsplus.com/tutorialsnosso cookie também é acessível apenas no code.tutsplus.com subdomínio. Tente usar o read_cookie() função no console do navegador para https://design.tutsplus.com/tutorials e será undefined.
Você pode criar um cookie acessível em todos os subdomínios de tutsplus.com executando a seguinte linha:
1 |
document.cookie = "site_theme=christmas;expires=Thu, 28 Dec 2023 08:58:01 GMT;domain=tutsplus.com"; |
Da mesma forma, você também pode fornecer um caminho para o qual o cookie estará acessível. Digamos que você queira o site_theme cookie para estar disponível apenas nos URLs que contêm /tutoriais no caminho deles, você pode fazer isso com a seguinte linha:
1 |
document.cookie = "site_theme=christmas;expires=Thu, 28 Dec 2023 08:58:01 GMT;domain=tutsplus.com;path=/tutorials"; |
Depois de executar a linha acima, o cookie não estará acessível na URL https://code.tutsplus.com/categories/javascript por causa da restrição de caminho.
Modificando e Excluindo Cookies em JavaScript
Quando estávamos lendo as informações de cookies da Wikipédia no início deste tutorial, você deve ter notado que o valor do cookie enwikiwmE-sessionTickTickCount foi se atualizando com o passar do tempo. Existem vários motivos pelos quais você pode querer atualizar o valor de um cookie periodicamente, como contar o número de visitas ou atualizar as preferências do usuário.
Depois de conhecer os fundamentos da criação de cookies, você também poderá modificar facilmente os cookies existentes. Continuando nosso exemplo da seção anterior, digamos que você queira alterar o valor de site_theme biscoito para ano Novo e altere a data de validade para o ano novo também. Você pode fazer isso com o seguinte código:
1 |
document.cookie = "site_theme=new_year;expires=Mon, 1 Jan 2024 08:58:01 GMT;domain=tutsplus.com;path=/tutorials"; |
Você se lembra quando eu disse que podemos especificar quando um cookie expira passando o expires ou max-age valores? Também podemos usá-los para excluir um cookie.
Definindo o valor de max-age para 0 fará com que o cookie expire nos próximos 0 segundos ou em outras palavras agora. Da mesma forma, você também pode definir o valor de expires para alguma data no passado e limpará o cookie.
1 |
document.cookie = "site_theme=new_year;max-age=0;domain=tutsplus.com;path=/tutorials"; |
2 |
document.cookie = "site_theme=new_year;expires=Mon, 1 Jan 2001 08:58:01 GMT;domain=tutsplus.com;path=/tutorials"; |
Ambas as linhas acima funcionarão se você quiser excluir um cookie.
Uma coisa importante a lembrar quando você está modificando ou excluindo cookies é que o domain e path os valores devem corresponder ao cookie que você está modificando ou excluindo.
Pensamentos finais
Neste tutorial, aprendemos como gerenciar cookies em JavaScript. Agora você deve ser capaz de ler dados de cookies, criar novos cookies e modificar ou excluir cookies existentes. Embora os cookies sejam ótimos para armazenar informações, há algumas coisas a serem lembradas. Primeiro, o armazenamento de cookies é limitado a cerca de 4 KB, portanto, você não deve usá-los para armazenar uma grande quantidade de informações. Em segundo lugar, você também não pode criar um grande número de cookies para o mesmo domínio. O limite varia entre os navegadores e é bastante generoso em torno de 300, pelo menos. Isso geralmente deve ser suficiente.
Se você deseja armazenar uma grande quantidade de dados e deseja acessá-los apenas localmente, considere usar o armazenamento local ou o armazenamento de sessão.
