Cómo almacenar múltiples pares de valor clave en cookies

Galletas Almacene información útil relacionada con el usuario que se puede obtener más tarde. Comprenden pequeños bits de datos mantenidos en un navegador web para rastrear la actividad del usuario. Una cookie puede contener solo una "cadena"Valor en JavaScript y almacenamiento múltiples pares de valor clave requerimiento múltiples cookies. Sin embargo, usar múltiples cookies también puede causar algunos problemas. Por ejemplo, si un dominio establece la galleta límites como "10“, Entonces no puedes almacenar la información de los 11^th usuario en una nueva cookie.

En tales casos, cree un cookie individual y almacenar múltiples pares de valores clave. Este enfoque ayuda a guardar información similar en una cookie y ofrece varias ventajas, como aplicar una fecha de vencimiento a múltiples pares de valor clave a la vez.

Esta publicación discute los métodos para almacenar múltiples pares de valores clave en cookies junto con los ejemplos apropiados. Entonces, comencemos!

Cómo almacenar múltiples pares de valor clave en una galleta

En lugar de mantener múltiples cookies, ¿es muy beneficioso almacenar valores de pares de claves relevantes en una sola cookie; Por ejemplo, en lugar de crear tres cookies para "Nombre completo","Clase","Sujeto", Podemos guardar estos pares de valor clave en una sola galleta de estudiante.

Como se mencionó anteriormente, una cookie solo puede contener un sencillo "valor clavePareja a la vez. Sin embargo, para guardar valores de clave múltiple, debe seguir las instrucciones a continuación:

• Crear un costumbre objeto.
• Conviértalo en una cadena JSON con la ayuda del "Stringify ()" método.
• Almacenar el resultante "documento.Galleta" objeto.

Ahora, consulte el siguiente ejemplo para comprender el concepto detrás del uso de una sola cookie para almacenar pares de valores múltiples.

Cómo almacenar valores en una cookie

En primer lugar, en nuestro "índice.html"Archivo, tres campos de entrada", "Nombre completo","Clase", y "Sujeto,"Se agregan, que aceptará la entrada del usuario como valores de campo respectivos.

Nombre completo:
Clase:
Sujeto:

A continuación, agregaremos dos botones llamados: "setcookie" y "getcookie". El "setcookie"El botón invoca el"setcookie ()"Función para establecer los valores especificados en una cookie, mientras que el"getcookie"Botón Llame al"Getcookie ()"Funciona para obtener los valores de las cookies:

Eche un vistazo a nuestro "índice.html" archivo:

En nuestro "proyecto.js"Archivo, definiremos el"setcookie ()" asociado con el "al hacer clic"Evento del"setcookieBotones. El "setcookie ()"La función accederá a los valores de los campos de entrada utilizando el"documento.getElementById ()"Método y guárdelos todos en una cadena"estudiante". Entonces la cadena "estudiante"El valor se asignará a"documento.GalletaObjeto, que resulta en crear una cookie:

función setcookie ()
var studentInfo = "fullname =" + documento.getElementById ("FullName").valor + "; class =" + documento.getElementById ("clase").valor + "; seno =" + documento.getElementById ("sujeto").valor;
documento.Cookie = StudentInfo;
alerta ("Se crea cookie");

Definiremos otra función llamada "Getcookie ()"En el mismo archivo. El "Getcookie ()"La función verificará la longitud de la cookie creada en el"siDeclaración ", y luego muestre la cookie creada en un cuadro de alerta. En el otro caso, si la cookie se expira o elimina, la caja de alerta indicará que "Lo siento, la cookie no está disponible":

function getcookie ()
if (documento.Galleta.longitud != 0)
alerta (documento.Galleta);

demás
alerta ("Lo siento, no es cookie disponible")

Así es como nuestro "proyecto.js"El archivo se parece:

Guardaremos ambos archivos y luego utilizaremos el código VS "Servidor en vivoExtensión para ejecutar la aplicación en el navegador:

Ingrese los valores en el "Nombre completo","Clase", y "Sujeto"Entrada en los campos y luego haga clic en el"setcookie" botón:

En este punto se generará un cuadro de alerta que indique que un "Se crea cookie":

Ahora, haga clic en el "getcookieBotón para recuperar los múltiples pares de valor de llave de la cookie creada:

Como puede ver en la salida que una sola "valor clave"Se muestra el par, que es"FullName = Sharqa":

Hemos intentado almacenar múltiples pares de valor clave en una galleta; sin embargo, el "Getcookie ()"La función solo obtuvo el par de valores de primera tecla. Esto se debe a que las cookies de JavaScript solo le permiten almacenar una sola cadena como un par de valores clave en una galleta.

En esta situación, puedes crear un costumbre Javascript objeto, luego conviértalo a un Cadena de json y almacene su valor (pares de valor clave múltiple) en una galleta. El ejemplo dado a continuación demostrará cómo realizar esta operación.

Cómo almacenar múltiples pares de valores clave en una galleta usando JSON

Mudarse al "setcookie ()"Función del archivo JavaScript y cree un objeto personalizado llamado"objeto1". El "objeto1"Obtendrá los valores de los campos de entrada agregados como sus propiedades:

función setcookie ()
var objeto1 = ;
objeto1.nombre = documento.getElementById ("FullName").valor;
objeto1.clase = documento.getElementById ("clase").valor;
objeto1.Asunto = documento.getElementById ("sujeto").valor;

En el siguiente paso, convertiremos "objeto1"A un Cadena de json con la ayuda de "Stringify ()"Método y almacene la cadena resultante"documento.Galleta" objeto:

var jsonstring = json.Stringify (Object1);
documento.Cookie = jsonstring;
alerta ("Se crea cookie");

Para recuperar el par de valores de clave múltiples almacenado como una cadena en el "documento.Galleta"Objeto, usaremos el"Json.analizar gramaticalmente()" método. El "Json.analizar gramaticalmente()"El método analizará el"documento.Galleta" en un Objeto json. Por último, se mostrarán múltiples pares de valor clave en un cuadro de alerta:

function getcookie ()
if (documento.Galleta.longitud != 0)
var obj = json.analizar (documento.Galleta);
alerta ("fullname =" + obj.nombre + "" + "class =" + obj.Clase + "" + "Sujem =" + OBJ.sujeto);

demás
alerta ("cookie no disponible");

Ahora, nuevamente abre el "índice.html"Página en el navegador e ingrese los valores en los campos especificados:

Haciendo clic en el "setcookieButton le hará saber que se crea una cookie:

En el siguiente paso, haga clic en el "getcookie"Botón, que está presente al lado del"setcookie":

El cuadro de alerta generado significa que hemos almacenado con éxito múltiples pares de valor clave en una sola cookie:

También puede utilizar múltiples cookies para el mismo propósito. Sin embargo, no recomendamos que use este enfoque, ya que hace que sea difícil mantener múltiples cookies.

Conclusión

Para almacenar múltiples pares de valores clave en una cookie, debe crear un objeto personalizado, conviértalo a un Cadena de json con la ayuda del "Stringify ()"Método, y almacene el resultante"documento.Galleta" objeto. Este enfoque ayuda a guardar información similar en una cookie y ofrece varios beneficios, como aplicar una fecha de vencimiento a múltiples pares de valor clave a la vez. Este artículo sobre el procedimiento para almacenar múltiples pares de valor clave en Galletas junto con los ejemplos adecuados.