En este artículo, aprenderemos cómo leer, escribir y eliminar cookies en jQuery. Esto se puede hacer usando los métodos cookie() y removeCookie() de la biblioteca jquery-cookie . Primero entenderemos qué es exactamente una cookie.
Cookie: Las cookies son pequeños bloques de datos creados por un servidor web cuando un usuario utiliza un sitio web y las cookies se almacenan en el dispositivo del usuario. Estas cookies recuerdan cierta información sobre el usuario.
1. Crear o escribir una cookie: Usamos el método cookie() para crear cookies.
Sintaxis:
$.cookie('name', 'value', { settings });
Parámetros: Este método tiene dos parámetros.
- nombre: Esta es la clave de la cookie
- valor: Este es el valor de la cookie.
- configuración: Este es un objeto que se puede utilizar para establecer parámetros adicionales a la Cookie.
2. Lectura de una cookie: podemos usar el método cookie() para leer una cookie pasando el nombre de la cookie y devolverá el valor de la cookie.
Sintaxis:
$.cookie('name');
Parámetros: Tiene un único parámetro, que es el nombre de la cookie a leer.
Valor devuelto: Devuelve el valor de la cookie.
3. Eliminar una cookie: podemos usar el método removeCookie() para leer una cookie pasando el nombre de la cookie. Devuelve verdadero cuando una cookie se eliminó con éxito, de lo contrario, devuelve falso.
Sintaxis:
$.removeCookie('name');
Parámetros: Tiene un único parámetro, que es el nombre de la cookie.
Valor devuelto: Devuelve verdadero cuando una cookie se eliminó con éxito, de lo contrario, devuelve falso.
El siguiente ejemplo demuestra todos los métodos anteriores.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
</script>
</head>
<body>
<form class="form-inline mt-4">
<input type="text" class="form-control mx-2"
id="cookieData"
placeholder="Enter something for cookie">
<button id="write" type="button"
class="btn btn-secondary mx-2">
Write / Add cookie
</button>
<button id="read" type="button"
class="btn btn-secondary mx-2">
Read /Show cookie
</button>
<button id="delete" type="button"
class="btn btn-secondary mx-2">
Remove cookie
</button>
</form>
<script type="text/javascript">
$(function () {
$("#write").click(function () {
$.cookie("data", $("#cookieData").val());
});
$("#read").click(function () {
alert($.cookie("data"));
});
$("#delete").click(function () {
$.removeCookie("data")
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: Creación de una cookie con tiempo de caducidad en días. El enfoque es similar al ejemplo anterior, solo necesitamos pasar un valor de caducidad adicional al crear la cookie.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
</script>
</head>
<style>
button {
display: block !important;
margin: 10px;
}
</style>
<body>
<form class="form-inline mt-4">
<input type="text" class="form-control mx-2"
id="cookieData" placeholder="Enter Data">
<input type="text" class="form-control mx-2"
id="cookieExpiry" placeholder="Enter Expiry">
</form>
<button id="write" type="button"
class="btn btn-primary mx-2">
Write / Add cookie
</button>
<button id="read" type="button"
class="btn btn-primary mx-2">
Read /Show cookie
</button>
<button id="delete" type="button"
class="btn btn-primary mx-2">
Remove cookie
</button>
<script type="text/javascript">
$(function () {
$("#write").click(function () {
// Write the cookie and set its expiry value
$.cookie("expiry", $("#cookieExpiry").val(),
{ expires: $.cookie("expiry") });
$.cookie("data", $("#cookieData").val());
});
$("#read").click(function () {
alert($.cookie("data") +
"\n expires in days = " +
$.cookie("expiry"));
});
$("#delete").click(function () {
$.removeCookie("data")
$.removeCookie("expiry")
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA