Crear, leer y eliminar cookies usando JavaScript y jQuery

1. que es una galleta
2. Crear, leer y eliminar cookies usando JavaScript
3. Crear, leer y eliminar cookies usando jQuery

Este artículo se refiere a las cookies del navegador. Aprenderemos todo lo que hay que saber sobre las cookies y sus diversas propiedades.

Más tarde, usaremos JavaScript y jQuery para crear, leer y eliminar cookies.

que es una galleta

Las cookies son archivos de texto en su computadora que contienen datos. Un servidor web finaliza la conexión después de enviar una página web a un navegador y se olvida por completo del usuario.

Cómo recordar la información del usuario fue un desafío para el que se crearon las cookies.

La cookie recuerda el nombre del usuario o ID de usuario para la visita posterior al sitio web. Las cookies se crean y recuperan en pares clave-valor.

Cuando se habla de tiendas en línea, la base de datos no almacenará los datos si un usuario agrega algunos artículos al carrito después de pasar mucho tiempo haciendo sus selecciones y no ha iniciado sesión.

Si el usuario cierra su navegador y abre la misma página nuevamente, el carrito estará vacío, lo que puede molestarlo. Luego, las cookies intervienen para salvar el día al almacenar la información del usuario y mantener su estado actual.

Para ver las cookies disponibles de un sitio web, vaya a Inspeccionar o presione Ctrl+Shift+I. Luego vaya a la pestaña Aplicaciones.

Verá la sección Cookies en Almacenamiento. Se parece a esto:

Hay varios campos visibles aquí. Estos son los atributos de una cookie.

Veamos cada uno de estos atributos en detalle.

1. Nombre - Es el nombre de la cookie.
2. Valor - Es el valor de la cookie.
3. Dominio - Este es el dominio de su sitio web.
4. Ruta: esta es la URL de la página web o directorio donde se configuró la cookie. Deje esto en blanco si desea recuperar la cookie de cualquier directorio o página.
5. Expires/Max-Age: esta es la fecha de caducidad de la cookie, después de la cual se eliminará la cookie.
6. Tamaño - Este es el tamaño de la cookie.
7. HttpOnly: una cookie con el atributo HttpOnly no está disponible para JavaScript Document.cookie. Solo se entrega al servidor.
8. Seguro - Solo se puede acceder a la cookie con un servidor seguro si este campo contiene la palabra "seguro". No existe tal restricción si este campo se deja vacío.
9. SameSite: esta función permite a los servidores declarar si envían o no cookies con solicitudes entre sitios. Esto mitiga el riesgo de ataques de falsificación de solicitudes entre sitios (CSRF). Este parámetro tiene tres opciones: Estricto, Laxo y Ninguno.
10. Clave de partición: la URL de nivel superior del navegador estaba activada cuando envió por primera vez una solicitud al extremo que configuró la cookie para que sirviera como clave de partición para una cookie.
11. Prioridad: la prioridad de las cookies permite a los servidores eliminar las cookies más antiguas con prioridades más bajas y conservar las más antiguas con prioridades más altas durante más tiempo.

Crear, leer y eliminar cookies usando JavaScript

JavaScript hace que sea increíblemente simple configurar, leer y borrar cookies en nuestro sitio web. Puede leer y escribir cookies relacionadas con el documento utilizando la propiedad cookie del Documento.

Actúa como captador y definidor de los valores de las cookies.

crear una galleta

Podemos crear una cookie en JavaScript utilizando document.cookie y asignarle un par clave-valor.

document.cookie = 'title=developer; expires=Mon, 21 Nov 2022 12:00:00 UTC;';

Si ejecuta la declaración anterior, creará una cookie en el navegador. Tenga en cuenta que especificamos cada valor en un par clave-valor.

Además, establecemos la fecha de caducidad porque si no la menciona, la cookie se eliminará cuando se cierre el navegador. El objetivo principal de la cookie es almacenar información, por lo que se debe mencionar la fecha de caducidad.

Veamos la cookie en el navegador.

Se crea la cookie con la clave y el valor especificados, como se ve en la salida. Puede crear múltiples cookies con diferentes pares clave-valor en un solo sitio web.

Cada cookie se puede utilizar para almacenar información diferente.

Digamos que queremos crear tres cookies; uno con el nombre, el segundo con la edad, y el tercero para contener información sobre el género de una persona. Verifique el código a continuación.

document.cookie = 'name=John; expires=Mon, 21 Nov 2022 12:00:00 UTC';
document.cookie = 'Age=25; expires=Mon, 21 Nov 2022 12:00:00 UTC';
document.cookie = 'Gender=Male; expires=Mon, 21 Nov 2022 12:00:00 UTC';

Estas declaraciones crearán tres cookies en el navegador. Echa un vistazo a la salida a continuación.

Puede utilizar la declaración document.cookie para crear tantas cookies como desee. Sin embargo, escribir repetidamente esta frase suena como un proceso monótono, así que hagamos un método genérico.

Observe el código a continuación para crear la función para generar las cookies.

function createCookie(name, value, ex_days) {
  if (ex_days) {
    const date = new Date();
    date.setTime(date.getTime() + (ex_days * 24 * 60 * 60 * 1000));
    var expires = 'expires=' + date.toUTCString();
  } else {
    var expires = '';
  }
  document.cookie = name + '=' + value + ';' + expires + ';';
}

La función createCookie recibe tres argumentos. El primero es el nombre.

Puedes asumir que es la clave. El segundo es el valor, y el tercero es la duración de vencimiento.

Puede llamar a la función de esta manera createCookie("CookieKey", "CookieValue", 50). Creará la cookie con el nombre CookieKey y establecerá CookieValue como su valor.

La fecha de vencimiento se establecerá en los próximos 50 días a partir de la fecha actual.

leer una galleta

Usando JavaScript, podemos leer rápidamente las cookies que configuramos en nuestro sitio web. Los pares clave-valor los obtendremos al acceder a las cookies porque las guardamos en pares clave-valor.

Observe el código a continuación para aprender el método para leer las cookies.

document.write(document.cookie);

Como puede ver en el código anterior, usamos el comando document.cookie para recuperar todas las cookies disponibles en nuestro sitio web.

Recuperemos todas las cookies que creamos. Mire la salida a continuación.

Cada cookie se obtiene como un par clave-valor, como mencionamos anteriormente. Es fácil leer las cookies.

Ahora, profundicemos en algunas cosas increíbles. La declaración document.cookie proporciona una lista de las cookies de nuestro sitio web, pero ¿qué pasa si queremos leer una cookie en particular?

Aprendamos la forma de leer una galleta; es sencillo Vamos a crear la función para recuperar la cookie especificada.

Verifique el código a continuación.

function getCookie(cookie_name) {
  let name = cookie_name + '=';
  let cookie_array = document.cookie.split(';');
  for (let i = 0; i < cookie_array.length; i++) {
    let cookie = cookie_array[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) == 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return '';
}

Probaremos este código en las tres cookies que creamos en la sección Crear una cookie. Es posible que esté confundido acerca de la función getCookie.

No te preocupes. Permítanos explicar cada línea de código en detalle y comprenderá claramente este método.

1. Pasamos el nombre de la cookie a la función para obtener los detalles de una cookie específica por su nombre.

2. Guardamos la información en cookies en pares clave-valor. Si queremos almacenar el nombre con un valor, escribiremos Name="CookieName". Cuando recuperemos la cookie, obtendremos el mismo valor.

3. Primero, debemos agregar = a nuestro nombre de cookie especificado para buscarlo. Hicimos lo mismo en la primera línea de código.

4. A continuación, necesitamos la matriz de cookies para recorrerla y encontrar la cookie que necesitamos. Supongamos que obtenemos todas las cookies a través de document.cookie; recibiríamos una cadena en lugar de una matriz.

   Por lo tanto, usamos document.cookie.split(';') para obtener una matriz. Obtendremos la siguiente matriz.

   

5. En el siguiente paso, creamos un bucle for que recorre cada cookie de la matriz. Estamos almacenando cada cookie en la variable cookie para realizar operaciones en ella.

6. El bucle while dentro del bucle for es importante. Estamos eliminando cualquier espacio adicional de la cookie actual, si existe.

   Si observa la matriz anterior, hay un espacio en blanco en las cookies de Edad y Género. El bucle while eliminará estos espacios en blanco adicionales.

7. En el último, usamos el método indexOf() de JavaScript, que nos da el índice de la primera aparición del parámetro dado. Pasamos el nombre de la cookie como parámetro y verificamos si el índice era igual a cero, luego encontramos nuestra cookie requerida.

Eliminar una cookie

JavaScript simplifica la eliminación de una cookie. La cookie se destruirá automáticamente si establecemos la fecha de caducidad de la cookie a una anterior.

Incluso si no especificó una fecha de caducidad cuando creó la cookie, aún puede eliminarla modificando el valor de su fecha de finalización a una hora anterior.

En este momento tenemos tres cookies en nuestro navegador: Edad, género y nombre. Eliminemos la cookie Género.

El siguiente comando creó la cookie Género.

document.cookie = 'Gender=Male; expires=Mon, 21 Nov 2022 12:00:00 UTC';

Está previsto que expire el 21 de noviembre de 2022. Cambiar la fecha a una fecha anterior a la fecha actual hará que se elimine la cookie.

Digamos que fijamos la fecha de caducidad en 1 de enero de 2000. Veamos qué cookies estarán disponibles en el navegador ahora.

Crear, leer y eliminar cookies usando jQuery

Hasta ahora, hemos hablado sobre el uso de JavaScript para crear, leer y eliminar cookies. En esta sección, repasaremos las mismas tres funcionalidades usando jQuery.

La biblioteca de JavaScript jQuery hace que sea muy simple para nosotros usar JavaScript.

Hablaremos sobre cómo funciona jQuery y cómo es más fácil de usar que JavaScript para crear, leer y eliminar cookies. Usaremos la biblioteca jquery-cookie para crear y realizar operaciones en las cookies.

crear una galleta

La biblioteca cookie de jQuery nos proporciona un método cookie() para crear cookies proporcionando el nombre y el valor.

Sintaxis:

$.cookie('name', 'value', {settings});

Hay tres parámetros para este método.

1. Nombre - Esta es la clave de la cookie.
2. Valor - Este es el valor de la cookie.
3. Configuración: este es un objeto que se puede usar para especificar parámetros de cookies adicionales.

Consulte el siguiente código para ver cómo jQuery puede crear la cookie.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.cookie("Title","Developer");
        </script>
    </head>
    <body></body>
</html>

Producción:

Se creó una cookie con el nombre Título y el valor Desarrollador. No especificamos una fecha de caducidad para esta cookie y, como puede ver en el resultado, no se menciona una fecha de caducidad en la columna Caduca.

Ahora estableceremos la fecha de caducidad de la cookie que acabamos de crear. Así es cómo:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.cookie("Title", "Developer", { expires: 20 });
        </script>
    </head>
    <body></body>
</html>

Producción:

Ahora puede ver la fecha de caducidad que aparece en la columna Caduca, ya que establecemos la fecha de caducidad en 20, lo que significa que esta cookie caducará 20 días a partir del día actual.

leer una galleta

A diferencia de JavaScript, leer cookies es más fácil con jQuery. Si recuerda, en JavaScript, teníamos que construir una función para leer una cookie específica.

Sin embargo, jQuery tiene una función integrada que nos permite leer las cookies requeridas simplemente pasando sus nombres como argumentos.

El método $.cookie("CookieName") se utiliza para leer la cookie específica. Eche un vistazo al código a continuación.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            var cookie = $.cookie("Title");
            document.write(cookie);
        </script>
    </head>
    <body></body>
</html>

Le pasamos el Título como parámetro a la función, que es el nombre de nuestra cookie creada. Debería devolvernos su valor que es Developer.

Echa un vistazo a la salida.

Eliminar una cookie

En cuanto a la sencillez de uso de jQuery, tiene un método llamado removeCookie() que elimina las cookies por su nombre. JavaScript carece de una función integrada para borrar cookies.

Debemos establecer la fecha de caducidad en una fecha anterior para eliminarlos. Eche un vistazo al siguiente código para eliminar la cookie.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.removeCookie("Title");
        </script>
    </head>
    <body></body>
</html>