Las cookies son básicamente una instalación de almacenamiento de los navegadores web. Viene bajo el almacenamiento web de un navegador que es una instalación de almacenamiento local o de cliente. Los datos están en el navegador incluso después de cerrar la ventana del navegador. En muchos sitios web es necesario recordar la información de la sesión, como cuando iniciamos sesión en el correo electrónico, Facebook, etc. muchas veces desde la misma PC, también en otro sitio comercial. para las cookies, podemos iniciar sesión fácilmente en esas sesiones, también estamos conectados por un límite de tiempo si el navegador estuvo cerrado todo el tiempo cuando usamos esos sitios. Las cookies se utilizan en JavaScript utilizando la propiedad de cookies del objeto Document . Esta propiedad es de lectura y escritura.
Una cookie es una tecnología antigua utilizada en los navegadores web como almacenamiento del lado del cliente que funciona mediante lenguajes de secuencias de comandos del lado del servidor como ASP, PHP, etc. Las cookies se pueden crear, modificar y también acceder. Las cookies formaban parte de la programación CGI (Common Gateway Interface) , las cookies se utilizan CGI para transmitir datos entre el navegador y el servidor.
Funcionamiento de las Cookies:Las cookies se almacenan como texto como datos en el almacenamiento local de un navegador. Las cookies son los datos que se envían desde el lado del servidor, con la información de los visitantes en cualquier página web o sitio web, y los almacenan en el disco duro cuando el visitante abandona la página web. Y luego, en el futuro, cuando el visitante vuelva a visitar el sitio web, las cookies se recuperan del lado del cliente y envían una solicitud con las cookies al lado del servidor, y el servidor recuerda lo que se almacenó anteriormente. Las cookies tienen algún atributo por el cual se almacenan datos o información.
- Nombre y valor: Este es el principal requisito obligatorio de las cookies. Es el valor principal de la sesión que se almacena y se recupera durante la visita a los sitios web como un par clave-valor.
- Dominio: Dominio es el dominio del sitio web en el que estamos navegando. No es algo obligatorio, no es necesario declarar el dominio al escribir las cookies. Puede ser declarado por defecto por el navegador web.
- Path: Path no es más que el sitio web, estamos navegando. también se puede configurar de forma predeterminada mediante el navegador web.
- Caduca: Es el atributo que define el tiempo de caducidad de las cookies guardadas. Si no se declara en el momento de configurar la cookie, la cookie caducará cuando se cierre el navegador.
- Seguro: este campo contiene solo una palabra, el nombre «seguro» , si está en blanco, las cookies se recuperan en cualquier servidor no seguro, pero si el campo no está en blanco, las cookies se recuperan solo en un servidor no seguro.
Alguna sintaxis de acceso a la propiedad de cookies en JavaScript:
- Galleta de escritura:
// For normal use without the optional fields document.cookie = "name= value";
- o
// For all the fields document.cookie = "name= value; expires=date; domain=domain_name; path=website_name; secure";
- Lectura de cookies: las cookies se pueden leer de muchas maneras, consulte a continuación:
var cookieVal=document.cookie;
- o
console.log(document.cookie);
- o
alert(document.cookie);
Ejemplos: A continuación se muestran los ejemplos de todas las tareas que se pueden realizar en las cookies.
- Escribiendo cookies: En este programa estaremos escribiendo cookies.
javascript
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script type="text/javascript">
// Function to setting cookies
function setCookies() {
// Using cookie property
cookieVal = document.cookieFrm.nameVal.value + ";";
document.cookie = "name = " + cookieVal;
}
// Function to reading cookies
function showCookies() {
// Display the cookie value when pressing
// the "showCookies" button
document.getElementById("ShowC").innerHTML =
("Cookie value = " + cookieVal);
}
</script>
</head>
<body>
<div style="background-color:#7FFF00; width: 50%;">
<h2 style="color:#006400;">Writing Cookies</h2>
<form action="" name="cookieFrm">
<!-- Write a value to store a cookie in Name box -->
Name:
<input type="text" name="nameVal" />
<br>
<br>
<!--Button for set cookies-->
<input type="button" value="Set Cookie"
onclick="setCookies();" />
<!--Button for show cookies-->
<input type="button" value="Show Cookie"
onclick="showCookies();" />
</form>
<span id="ShowC"> </span>
<!--after the press the show cookie button
the value of the cookie will appear here-->
</div>
</body>
</html>
- Producción:
- Lectura de cookies: En este programa estaremos leyendo cookies.
javascript
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script type="text/javascript">
// Function to setting cookies
function setCookies() {
document.cookie = "name = "
+ document.cookieFrm.nameVal.value + ";";
document.cookie = "class = "
+ document.cookieFrm.cls.value + ";"
document.cookie = "subject = "
+ document.cookieFrm.sub.value + ";"
}
//Function to reading cookies
function showCookies() {
var arrCookie = document.cookie.split(";");
/* To store the cookie value in an array separately
here use "split()" method, which splits the values
where ";" is located, such as
arrCookie[0]="name=geeksforgeeks"
arrCookie[1]="class=3rd year" */
for (var i = 0; i < arrCookie.length; i++) {
var valArr = arrCookie[i].split("=");
/* here "valArr" is use to store the actual value
of a particular cookie field, such as
valArr[0]=name
valArr[1]=geeksforgeeks */
if (valArr[0].trim() == 'name')
/* The "trim()" is used for remove unwanted white
spaces, otherwise there maybe some mismatch in
the values search for "name" */
{
document.cookieFrm.nameVal.value = valArr[1];
}
if (valArr[0].trim() == 'class') {
document.cookieFrm.cls.value = valArr[1];
}
if (valArr[0].trim() == 'subject') {
document.cookieFrm.sub.value = valArr[1];
}
}
}
</script>
</head>
<body>
<div style="background-color:#7FFF00; width: 50%;">
<h2 style="color:#006400;">Reading Cookies</h2>
<form action="" name="cookieFrm">
<!--write value to store as cookie in Name box-->
Name:
<input type="text" name="nameVal" />
<br>
<br> Class:
<input type="text" name="cls" />
<br>
<br> Subject:
<input type="text" name="sub" />
<br>
<br>
<!-- Button for set cookies-->
<input type="button" value="Set Cookie"
onclick="setCookies();" />
<!-- Button for show cookies-->
<input type="button"
value="Restore previous value using Cookie"
onclick="showCookies();" />
</form>
<span id="ShowC"> </span>
</div>
</body>
</html>
- Producción:
Nota: En ambos ejemplos podemos usar el método escape () y unescape() para escribir y leer el valor de la cookie respectivamente. El valor de la cookie no puede contener espacios o caracteres especiales como punto y coma (;), en este caso, no podemos separar los valores de las cookies para almacenarlas, por lo que si usamos esos dos métodos, estos problemas se resolverán. El escape() se usa cuando se almacenan los valores de las cookies y unescape() se usa cuando se recuperan los valores de las cookies. Simplemente coloque la declaración en el método escape() y unescape() como se muestra a continuación:
escape(document.cookieFrm.nameVal.value)
unescape(document.cookie)
Actualizar y Eliminar cookies existentes: Actualizar el valor de una cookie es muy fácil, reemplazando el valor anterior por un nuevo valor. Pero eliminar un valor de cookie no es tan fácil como actualizar, pero también es algo fácil. El valor de una cookie se elimina automáticamente cuando se alcanza el tiempo de vencimiento de la cookie. Pero si queremos eliminar el valor de una cookie antes de que caduque, debemos reemplazar el campo de caducidad con una fecha y hora pasadas, luego la cookie se eliminará.
- Actualización de cookies: En este programa estaremos Actualizar cookies.
javascript
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script type="text/javascript">
// Function to setting cookies
function setCookies() {
cookVal = "name = "
+ escape(document.cookieFrm.nameVal.value) + ";";
document.cookie = cookVal;
document.getElementById("ShowC").innerHTML =
("Cookie value : <br>" + document.cookie);
}
// Function to update cookies
function updateCookies() {
// Updating the cookie value
upCoo = "name = "
+ escape(document.cookieFrm.updateCoo.value) + ";";
document.cookie = upCoo;
// Showing updated cookie value
document.getElementById("ShowCC").innerHTML =
("<br><br>Updated Cookie value : <br>"
+ document.cookie);
}
</script>
</head>
<body>
<div style="background-color:#7FFF00; width: 60%;">
<h2 style="color:#006400;">Update Cookies</h2>
<form action="" name="cookieFrm">
Enter a value to store:
<input type="text" name="nameVal" />
<br>
<br>
Enter a value to update:
<input type="text" name="updateCoo" />
<br>
<br>
<!-- Button for set cookies-->
<input type="button" value="Set Cookie"
onclick="setCookies();" />
<input type="button" value="Update existing Cookie"
onclick="updateCookies();" />
</form>
<span id="ShowC"> </span>
<span id="ShowCC"> </span>
</div>
</body>
</html>
- Producción:
- Borrado de cookies: En este programa estaremos Borrando cookies.
javascript
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script type="text/javascript">
// Setting cookies
function setCookies() {
cookVal = "name = "
+ escape(document.cookieFrm.nameVal.value) + ";";
document.cookie = cookVal +
"expires = Sun, 01-May-2021 14:00:00 GMT";
// Add expiration date &print the cookie value
document.getElementById("ShowC").innerHTML =
("Cookie value : <br>" + document.cookie);
}
// Function to setting cookies
function dltCookies() {
document.cookie = cookVal +
"expires = Sun, 01-May-2019 14:00:00 GMT";
// Change the expiration date
document.getElementById("ShowC").innerHTML =
("After delete, Cookie value : <br>" + document.cookie + "<br>");
}
</script>
</head>
<body>
<div style="background-color:#7FFF00; width: 55%;">
<h2 style="color:#006400;">
Update & Delete Cookies
</h2>
<form action="" name="cookieFrm">
enter a cookie value:
<input type="text" name="nameVal" />
<br>
<br>
<input type="button" value="Set Cookie"
onclick="setCookies();" />
<input type="button" value="Delete Cookie"
onclick="dltCookies();" />
</form>
<span id="ShowC"> </span>
<span id="ShowCC"> </span>
</div>
</body>
</html>
- Producción:
Publicación traducida automáticamente
Artículo escrito por SoumikMondal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA