Diretório de artigos
visão geral
"Um cookie é uma variável armazenada no computador do visitante. Este cookie é enviado sempre que o mesmo computador solicita uma página através de um navegador. Você pode usar JavaScript para criar e recuperar o valor do cookie." - w3school
Do ponto de vista do JavaScript, os cookies são informações de string. Essas informações são armazenadas no computador do cliente e usadas para transferir informações entre o computador cliente e o servidor. Esta informação pode ser lida ou definida em JavaScript através de document.cookie. Como os cookies são usados principalmente para comunicação entre o cliente e o servidor, além do JavaScript, as linguagens do lado do servidor também podem acessar os cookies.
1. Defina cookies
Em JavaScript, as informações dos cookies podem ser criadas, lidas, modificadas e excluídas através do atributo document.cookie
Para definir informações de cookie, [document.cookie="name=value"]
precisa ser definido como uma string na forma de name=value
需要注意，一次只能设置一个名/值对
document.cookie = "name=张三";
Os valores de armazenamento de cookies não podem usar ponto e vírgula (;), vírgulas (,), sinais de igual (=) e espaços , pois esses símbolos especiais são identificadores de cookies e são usados para identificar e definir o formato de armazenamento de cookies, portanto:
Ao armazenar o cookie, você pode usar a função interna encodeURIComponent()do js para codificar os dados.
Ao ler o cookie, você pode usar a função interna decodeURIComponent()do js para decodificar os dados.
document.cookie = "url=https://www.baidu.com/;?id=123";
//https://www.baidu.com/ 实际存储
document.cookie = "url=" + encodeURIComponent("https://www.baidu.com/;?id=123");
1. Defina o tempo de expiração dos cookies
Por padrão, os cookies são de nível de sessão, ou seja, serão excluídos quando o usuário fechar o navegador. No entanto, no desenvolvimento real, os cookies geralmente precisam ser armazenados por um longo período. Você pode definir o tempo de expiração do cookie para mantê-lo válido dentro de um determinado período de tempo. Aqui está um exemplo de como definir o tempo de expiração de um cookie para um dia:
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
document.cookie = `username=John; expires=${
expirationDate.toUTCString()}`;
2. Especifique o caminho para o qual os cookies podem ser acessados
Ao definir um cookie, você pode usar pathparâmetros para especificar o caminho onde o cookie pode ser acessado. pathOs parâmetros são usados para limitar o caminho sob o qual os cookies são válidos. Somente URLs que correspondam ao caminho especificado podem acessar este cookie.
A seguir está um exemplo de especificação de um caminho ao definir um cookie:
document.cookie = "username=John; path=/example";
No exemplo acima, o cookie para “nome de usuário” é definido para que só possa ser acessado no caminho da URL que começa com /exemplo. Por exemplo, apenas páginas em caminhos como /example, /example/page1, /example/page2, etc. podem ler este cookie.
Por padrão, se o parâmetro path não for especificado, o caminho padrão do cookie será o caminho da página onde o cookie está definido. Por exemplo, se um cookie for definido na página http://example.com/login, o caminho padrão para o cookie será /login.
Deve-se observar que cada caminho é um contexto independente, e o cookie só pode ser acessado no caminho em que está definido e em seus subcaminhos. Se o caminho for definido incorretamente, o cookie poderá não estar acessível na página pretendida ou poderá ser excluído.
Portanto, ao definir cookies, especifique o parâmetro path razoavelmente de acordo com as necessidades reais para garantir que o cookie seja válido no caminho esperado.
3. Especifique o nome do host que pode acessar o cookie
Ao definir um cookie, você pode usar o parâmetro domain para especificar o nome do host que pode acessar o cookie. O parâmetro domínio é usado para limitar o nome do host sob o qual o cookie é válido. Somente URLs que correspondam ao nome de host especificado podem acessar este cookie.
A seguir está um exemplo de especificação do nome do host ao definir um cookie:
document.cookie = "username=John; domain=example.com";
No exemplo acima, o cookie para “nome de usuário” está definido para ser acessível somente a partir de todos os URLs sob o nome de host example.com. Isso significa que apenas as páginas de exemplo.com e seus subdomínios (como subdomínio.exemplo.com) podem ler esse cookie.
Por padrão, se o parâmetro de domínio não for especificado, o nome do host padrão do cookie será o nome do host da página onde o cookie está definido. Por exemplo, se um cookie for definido na página http://example.com/login, o nome de host padrão do cookie será example.com.
Deve-se observar que ao restringir o nome do host de um cookie especificando o parâmetro domínio, você precisa seguir algumas regras:
- O nome do host deve ter duas ou mais partes de nome de domínio. Por exemplo, example.com é válido, mas .com ou localhost não.
- A configuração do nome do host se aplica apenas a nomes de subdomínios e os cookies não podem ser definidos no nome de domínio pai.
Portanto, ao definir cookies, especifique o parâmetro de domínio razoavelmente de acordo com as necessidades reais para garantir que o cookie seja válido sob o nome de host esperado.
2. Leia cookies
Você precisa ler (obter) cookies em um ambiente de servidor
. Você também pode usar document.cookie. Este atributo retornará uma string. A string contém todas as informações do cookie, exceto idade máxima, expiração, caminho e domínio
. Obtenha o valor do cookie , que retorna uma string separada por ponto e vírgula de pares de valores-chave contendo todos os cookies atualmente armazenados no navegador. Para obter o valor de um cookie específico, a string precisa ser analisada.
Para obter o valor de um único cookie, podemos usar a função split() para dividir a string que contém as informações do cookie em um array e, em seguida, obter o valor de um cookie. A seguir está um exemplo de como obter o valor de um cookie. cookie chamado "nome de usuário"
:
function getCookie(name) {
const cookieString = document.cookie;
const cookies = cookieString.split('; ');
for (const cookie of cookies) {
const [cookieName, cookieValue] = cookie.split('=');
if (cookieName === name) {
return cookieValue;
}
}
return null;
}
const username = getCookie('username');
Você também pode usar expressões regulares
document.cookie = "name=张三";
let cookie = document.cookie;
let key ='name'
let reg = new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)");
console.log(cookie.match(reg)[2])
3. Exclua cookies
Excluir um cookie é semelhante a modificar um cookie. Você só precisa redefinir o valor do cookie para vazio e definir o atributo expira para uma data no passado. Aqui está um exemplo de exclusão de
um cookie chamado "nome de usuário":
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() - 1);
document.cookie = 'username=; expires=${expirationDate.toUTCString()}';
De salientar que os cookies ficam armazenados no navegador e podem ser modificados ou eliminados pelo utilizador. Existem também algumas restrições aos cookies, como limitações no número de cookies e no tamanho do armazenamento em cada nome de domínio.
No desenvolvimento real, além de usar JavaScript nativo para operar cookies, você também pode usar ferramentas de gerenciamento de cookies fornecidas por estruturas e bibliotecas JavaScript modernas, como js-cookie, universal-cookie, etc., para simplificar a operação e o gerenciamento de cookies.
4. Encapsular e construir uma função geral de processamento de cookies
O processo de processamento de cookies é relativamente complexo e apresenta certas semelhanças. Portanto, diversas funções podem ser definidas para completar operações comuns de cookies, conseguindo assim a reutilização de código. As operações de cookies comumente usadas e suas implementações de funções estão listadas abaixo.
//设置cookie
function setCookie(obj,time){
let date = new Date(new Date().getTime()+ time*24*60*60*1000).toUTCString();
for(let key in obj){
document.cookie = key+"="+obj[key]+"; expires="+ date;
}
},
//读取cookie
function getCookie(key){
return document.cookie.match( new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)"))[2]
},
//删除cookie
function removeCookie(key){
setCookie({
[key]: "" }, -1)
}