Como armazenar vários pares de valor-chave em cookies

Biscoitos Armazene informações úteis relacionadas ao usuário que podem ser buscadas posteriormente. Eles compreendem pequenos pedaços de dados mantidos em um navegador da web para rastrear a atividade do usuário. Um biscoito pode conter apenas um “corda”Valor em JavaScript e armazenamento Múltiplos pares de valor-chave requer vários cookies. No entanto, o uso de vários cookies também pode causar alguns problemas. Por exemplo, se um domínio Define o biscoito limites como "10“, Então você não pode armazenar as informações dos 11^º Usuário em um novo cookie.

Nesses casos, crie um biscoito único e armazenar vários pares de valor-chave. Essa abordagem ajuda a salvar informações semelhantes em um cookie e oferece várias vantagens, como aplicar uma data de validade a vários pares de valor-chave de uma só vez.

Este post discute os métodos de armazenar vários pares de valor-chave em cookies junto com os exemplos apropriados. Então vamos começar!

Como armazenar vários pares de valor-chave em um cookie

Em vez de manter vários cookies, é altamente benéfico armazenar valores de pares de chaves relevantes em um único cookie; Por exemplo, em vez de criar três cookies para “Nome completo","Aula","Assunto”, Podemos salvar esses pares de valor-chave em um único biscoito de estudantes.

Como mencionado anteriormente, um cookie só pode segurar um único “valor chave”Par de cada vez. No entanto, para economizar valores de várias teclas, você deve seguir as instruções abaixo:

• Criar uma personalizado objeto.
• Converte -o em uma corda JSON com a ajuda do “stringify ()”Método.
• Armazene o resultante “documento.biscoito”Objeto.

Agora, confira o exemplo a seguir para entender o conceito por trás do uso de um único cookie para armazenar pares de valores múltiplos.

Como armazenar valores em um cookie

Primeiro de tudo, em nosso “índice.html”Arquivo, três campos de entrada,“Nome completo","Aula", e "Assunto,”São adicionados, que aceitarão a entrada do usuário como os respectivos valores de campo.

Nome completo:
Aula:
Assunto:

Em seguida, adicionaremos dois botões chamados: “setcookie" e "getcookie”. O "setcookie"Button chama o"setcookie ()”Função para definir os valores especificados em um cookie, enquanto o“getcookie”Botão Ligue para o“getcookie ()”Função para buscar os valores dos cookies:

Dê uma olhada no nosso “índice.html" arquivo:

Na nossa "projeto.JS”Arquivo, definiremos o“setcookie ()" associado com o "ONCLICKEvento do “setcookie”Botões. O "setcookie ()”A função acessará os valores dos campos de entrada, utilizando o“documento.getElementById ()”Método e armazene -os todos juntos em uma string“StudentInfo”. Então a string “StudentInfo”O valor será atribuído a“documento.biscoito”Objeto, que resulta na criação de um cookie:

função setcookie ()
var Studentinfo = "FullName =" + documento.getElementById ("FullName").valor + "; class =" + documento.getElementById ("classe").valor + "; sujeito =" + documento.getElementById ("sujeito").valor;
documento.Cookie = studentInfo;
alerta ("Cookie é criado");

Vamos definir outra função chamada “getcookie ()”No mesmo arquivo. O "getcookie ()”A função verificará o comprimento do cookie criado no“se”Declaração, e depois exibe o cookie criado em uma caixa de alerta. No outro caso, se o cookie for expirado ou excluído, a caixa de alerta afirmará que “Desculpe, biscoito não está disponível”:

função getCookie ()
if (documento.biscoito.comprimento != 0)
Alerta (documento.biscoito);

outro
alerta ("Desculpe, biscoito não está disponível")

Aqui está como nosso “projeto.JS”O arquivo parece:

Salvaremos os dois arquivos e depois utilizaremos o código VS “Servidor vivoExtensão para executar o aplicativo no navegador:

Insira valores no “Nome completo","Aula", e "Assunto”Campos de entrada e clique em“setcookie" botão:

Uma caixa de alerta será gerada neste momento afirmando que um “Cookie é criado”:

Agora, clique no “getcookie”Botão para recuperar os vários pares de valor-chave do cookie criado:

Como você pode ver na saída que um único “valor chave”O par é exibido, que é“FullName = sharqa”:

Tentamos armazenar vários pares de valor-chave em um cookie; No entanto, o "getcookie ()”A função apenas buscou o par de valores da primeira tecla. Isso ocorre porque os cookies JavaScript apenas permitem que você armazene uma única string como um par de valores-chave em um biscoito.

Nesta situação, você pode criar um personalizado JavaScript objeto, Em seguida, converta -o para um String json e armazenar seu valor (pares de valor de chave múltipla) em um cookie. O exemplo abaixo do ritmo demonstrará como executar esta operação.

Como armazenar vários pares de valor-chave em um cookie usando JSON

Mova -se para o “setcookie ()”Função do arquivo JavaScript e crie um objeto personalizado chamado“objeto1”. O "objeto1”Receberá os valores dos campos de entrada adicionados como suas propriedades:

função setcookie ()
var object1 = ;
objeto1.nome = documento.getElementById ("FullName").valor;
objeto1.class = documento.getElementById ("classe").valor;
objeto1.sujeito = documento.getElementById ("sujeito").valor;

Na próxima etapa, vamos converter “objeto1”Para um String json com a ajuda de "stringify ()”Método e armazene a sequência resultante“documento.biscoito”Objeto:

var jSonstring = JSON.stringify (object1);
documento.Cookie = JSonstring;
alerta ("Cookie é criado");

Para recuperar o par de vários valores-chave armazenado como uma string no “documento.biscoito”Objeto, usaremos o“JSON.Parse ()”Método. O "JSON.Parse ()”Método analisará o“documento.biscoito" dentro de Objeto json. Por fim, vários pares de valor-chave serão exibidos em uma caixa de alerta:

função getCookie ()
if (documento.biscoito.comprimento != 0)
var obj = json.Parse (documento.biscoito);
alerta ("fullname =" + obj.nome + "" " +" class = " + obj.classe + "" " +" sujeito = " + obj.assunto);

outro
alerta ("cookie não disponível");

Agora, novamente, abra o “índice.html”Página no navegador e insira valores nos campos especificados:

Clicando no “setcookie”Button informará que um cookie é criado:

Na próxima etapa, clique no “getcookie”Button, que está presente ao lado do“setcookie”:

A caixa de alerta gerada significa que armazenamos com sucesso vários pares de valor-chave em um único cookie:

Você também pode utilizar vários cookies para o mesmo propósito. No entanto, não recomendamos que você use essa abordagem, pois torna desafiador manter vários cookies.

Conclusão

Para armazenar vários pares de valor-chave em um biscoito, você precisa criar um objeto personalizado, convertê -lo em um String json com a ajuda do “stringify ()”Método e armazenar o resultante“documento.biscoito”Objeto. Essa abordagem ajuda a salvar informações semelhantes em um cookie e oferece vários benefícios, como aplicar uma data de validade a vários pares de valor-chave de uma só vez. Este artigo discutiu o procedimento para loja Múltiplos pares de valor-chave em Biscoitos junto com os exemplos adequados.