miércoles, 3 de septiembre de 2014

Tutorial Javascript parte 32 - COOKIES




En esta parte del tutorial veremos el modo de manejar cookies, crear cookies, obtener su valor y eliminarlas.

Las cookies permiten guardar información en el navegador del usuario.

Las cookies son datos, que son guardados en archivos de texto en la computadora.

Cuando un servidor web envía una página web al navegador, la relación entre cliente-servidor se termina y el servidor deja de tener conocimiento sobre el usuario.

Las cookies fueron inventadas para solventar el problema "como recordar la información sobre el usuario":

Cuando un usuario visita una página web, por ejemplo, su nombre puede ser guardado en una cookie y la próxima vez que el usuario visite la página,  la cookie recordará su nombre.

 A continuación, puedes ver el código de ejemplo del capítulo ...


<!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.toUTCString();
    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];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
    }
    return "";
} 

function deleteCookie(cname)
{
document.cookie = cname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC"; 
}

window.onload = function()
   {
    var btn = document.getElementById("btn");
 btn.onclick = function()
  {
    var email = document.formulario.email.value;
    var nombre = document.formulario.nombre.value;
    
    setCookie("email", email, 10);
    setCookie("nombre", nombre, 10);
    
    alert(document.cookie);
    
  }
  
  var btn_email = document.getElementById("btn-email");
  var btn_nombre = document.getElementById("btn-nombre");
  
  btn_email.onclick = function()
    {
     alert(getCookie("email"));
    }
    
  btn_nombre.onclick = function()
    {
     alert(getCookie("nombre"));
    }
  
  var btn_delete = document.getElementById("btn-delete");
  btn_delete.onclick = function()
    {
     deleteCookie("email");
  deleteCookie("nombre");
    }
  
  alert(document.cookie);
   }

</script>
</head>
<body>
<form method="post" name="formulario">
Email: <input type="text" name="email">
Nombre: <input type="text" name="nombre">
<button type="button" id="btn">Guardar cookies</button>
</form>

<button id="btn-email">Obtener valor de la cookie email</button>
<button id="btn-nombre">Obtener valor de la cookie nombre</button>
<br><br>
<button id="btn-delete">Eliminar cookies</button>


</body>
</html>