Super cookies.
Por sí no lo sabías, las cookies son pequeños archivos que se almacenan en el ordenador de la persona que visita tu web. En ellos guardamos datos que nos ayudan a dar un servicio más personalizado.¿Cómo empezamos con las cookies?
Con JS podemos crear, leer, modificar y eliminar las cookies a través de la propiedad document.cookie.
Para crear cookie
document.cookie="username=jdalebrook"Para definir caducidad a la cookie
document.cookie="username=jdalebrook; expires=Thu, 18 Dec 2013 12:00:00 GMT";Para definir el dominio en el que funciona la cookie
document.cookie="username=jdalebrook; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Para leer una cookie ya creada sólo tenemos que llamar a la cookie.
var x = document.cookie;Para modificarla, "sobreescribimos datos":
document.cookie="username=Nuevonombre; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";Para borrarla, sobreescibimos con datos vacios:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
Ejemplo:
Crear:
Definimos una función llamada setCookie con tres atributos, nombre, valor y caducidad.
Definimos una variable que recoge la fecha actual.
Definimos una variable que crea la caducidad *setTime / toGMTString
function setCookie(cname, cvalue, exdays) {Recoger información:
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
Creamos una función que llama a la cookie creada.
Definimos una variable con el nombre de nuestra cookie.
Definimos una variable que convierte en array los valores recibidos.
Para estos valores definimos un for en el que se muestran los valores del array siempre que existan.
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
Un ejemplo completo sería:
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Hola " + user);
} else {
user = prompt("Por favor introduce tu nombre:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
No hay comentarios:
Publicar un comentario