JavaScript y cookies
¿Qué son las cookies?
Los navegadores y servidores web utilizan el protocolo HTTP para comunicarse y HTTP es un protocolo sin estado. Pero para un sitio web comercial, se requiere mantener la información de la sesión entre diferentes páginas. Por ejemplo, el registro de un usuario finaliza después de completar muchas páginas. Pero cómo mantener la información de la sesión de los usuarios en todas las páginas web.
En muchas situaciones, el uso de cookies es el método más eficiente para recordar y rastrear preferencias, compras, comisiones y otra información requerida para una mejor experiencia del visitante o estadísticas del sitio.
Cómo funciona ?
Su servidor envía algunos datos al navegador del visitante en forma de cookie. El navegador puede aceptar la cookie. Si es así, se almacena como un registro de texto sin formato en el disco duro del visitante. Ahora, cuando el visitante llega a otra página de su sitio, el navegador envía la misma cookie al servidor para su recuperación. Una vez recuperado, su servidor sabe / recuerda lo que se almacenó anteriormente.
Las cookies son un registro de datos de texto sin formato de 5 campos de longitud variable:
Expires- La fecha de caducidad de la cookie. Si está en blanco, la cookie caducará cuando el visitante salga del navegador.
Domain - El nombre de dominio de su sitio.
Path- La ruta al directorio o página web que instaló la cookie. Esto puede estar en blanco si desea recuperar la cookie de cualquier directorio o página.
Secure- Si este campo contiene la palabra "seguro", la cookie solo se puede recuperar con un servidor seguro. Si este campo está en blanco, no existe tal restricción.
Name=Value - Las cookies se configuran y recuperan en forma de pares clave-valor
Las cookies se diseñaron originalmente para la programación CGI. Los datos contenidos en una cookie se transmiten automáticamente entre el navegador web y el servidor web, por lo que los scripts CGI en el servidor pueden leer y escribir valores de cookies que se almacenan en el cliente.
JavaScript también puede manipular cookies usando el cookie propiedad de la Documentobjeto. JavaScript puede leer, crear, modificar y eliminar las cookies que se aplican a la página web actual.
Almacenamiento de cookies
La forma más sencilla de crear una cookie es asignar un valor de cadena al objeto document.cookie, que se ve así.
document.cookie = "key1 = value1;key2 = value2;expires = date";Aquí el expiresEl atributo es opcional. Si proporciona a este atributo una fecha u hora válida, la cookie caducará en una fecha u hora determinada y, a partir de entonces, no se podrá acceder al valor de las cookies.
Note- Los valores de las cookies no pueden incluir punto y coma, comas ni espacios en blanco. Por esta razón, es posible que desee utilizar JavaScriptescape()función para codificar el valor antes de almacenarlo en la cookie. Si hace esto, también tendrá que usar el correspondienteunescape() función cuando lee el valor de la cookie.
Ejemplo
Intente lo siguiente. Establece un nombre de cliente en una cookie de entrada.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>Salida
Ahora su máquina tiene una cookie llamada name. Puede configurar varias cookies utilizando varios pares clave = valor separados por comas.
Leer cookies
Leer una cookie es tan simple como escribir una, porque el valor del objeto document.cookie es la cookie. Por lo tanto, puede utilizar esta cadena siempre que desee acceder a la cookie. La cadena document.cookie mantendrá una lista de pares nombre = valor separados por punto y coma, dondename es el nombre de una cookie y el valor es su valor de cadena.
Puedes usar cadenas ' split() función para dividir una cadena en clave y valores de la siguiente manera:
Ejemplo
Pruebe el siguiente ejemplo para obtener todas las cookies.
<html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>Note - aquí length es un método de Arrayclase que devuelve la longitud de una matriz. Discutiremos las matrices en un capítulo aparte. En ese momento, intente digerirlo.
Note- Es posible que ya haya otras cookies configuradas en su máquina. El código anterior mostrará todas las cookies configuradas en su máquina.
Configuración de la fecha de vencimiento de las cookies
Puede extender la vida de una cookie más allá de la sesión actual del navegador configurando una fecha de vencimiento y guardando la fecha de vencimiento dentro de la cookie. Esto se puede hacer configurando el‘expires’ atribuir a una fecha y hora.
Ejemplo
Pruebe el siguiente ejemplo. Ilustra cómo extender la fecha de caducidad de una cookie en 1 mes.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>Salida
Eliminar una cookie
A veces, querrá eliminar una cookie para que los intentos posteriores de leer la cookie no devuelvan nada. Para hacer esto, solo necesita establecer la fecha de vencimiento en un tiempo en el pasado.
Ejemplo
Pruebe el siguiente ejemplo. Ilustra cómo eliminar una cookie estableciendo su fecha de caducidad a un mes de la fecha actual.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>