Establecer y eliminar una cookie en jQuery
-
Crear y eliminar una cookie usando
jquery-cookieen jQuery - Crear y eliminar una cookie usando una función personalizada en jQuery
Este artículo enseña dos ejemplos de cómo configurar y eliminar una cookie usando jQuery. En el primer ejemplo, usará un complemento llamado jquery-cookie que puede obtener de GitHub.
El segundo ejemplo utilizará una función personalizada para crear y eliminar la cookie.
Crear y eliminar una cookie usando jquery-cookie en jQuery
El complemento jquery-cookie le permite crear y eliminar cookies en su navegador web. El complemento tiene dos funciones que lo hacen posible; son $.cookie() y $.removeCookie().
La función $.cookie() le permite establecer el nombre de la cookie y sus parámetros. Mientras que la función $.removeCookie() eliminará la cookie.
Puede obtener jquery-cookie de su repositorio de GitHub; después de eso, guárdelo en su directorio de trabajo. A partir de ahí, asegúrese de haber vinculado jQuery también.
El siguiente código contiene detalles sobre cómo usar jquery-cookie para establecer y eliminar una cookie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-set-cookie</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<script type="text/javascript" src="js/jquery-cookie.js"></script>
<script>
// Define a cookie called DelftStack_Cookie
// and set its value to 4500.
$.cookie("DelfStack_Cookie", 4500);
let cookie_value = $.cookie("DelfStack_Cookie");
/* Remove the cookie
$.removeCookie("DelfStack_Cookie");*/
</script>
</body>
</html>
Salida (observe la consola del navegador):
Crear y eliminar una cookie usando una función personalizada en jQuery
Una función personalizada que calcula el tiempo y utiliza el método document.cookie() puede establecer y eliminar una cookie. Posteriormente, utilizará el cálculo del tiempo para determinar la fecha de caducidad de la cookie.
Para esto, necesitará los métodos de objeto Date; estos son setTime(), getTime() y toGMTString(). Además, escapará los caracteres en el nombre de la cookie usando encodeURIComponent.
En el siguiente código, encontrará la función personalizada que puede usar para establecer una cookie. Pero, hemos dejado el código que puede eliminar una cookie como comentario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-set-cookie</title>
</head>
<body>
<script>
function create_cookie(cookie_name, cookie_value, cookie_life_time) {
let cookie_expires;
if (cookie_life_time) {
let current_date = new Date();
let current_time = current_date.getTime();
current_date.setTime(current_time + (cookie_life_time * 24 * 60 * 60 * 1000));
cookie_expires = "; expires=" + current_date.toGMTString();
} else {
cookie_expires = "";
}
document.cookie = encodeURIComponent(cookie_name) + "=" + encodeURIComponent(cookie_value) + cookie_expires + "; path=/";
}
create_cookie('Habdul Hazeez', '14092022', 1);
/* Erase the stored cookie
function erase_cookie(cookie_name) {
create_cookie(cookie_name, "", -1);
}*/
</script>
</body>
</html>
Salida (observe la consola del navegador):
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn