Cookies, crear cookies, ver valores de las cookies

 
Las cookies, son fragmentos de información que se guardan en el equipo del usuario a traves del navegador. Esto puede ser interesante, por ejemplo, para guardar el idioma del usuario en una web con varios idiomas.

Como ya se ha dicho, las cookies, están pensadas para introducir pequeña información, por lo que tienen unos límites (rfc2109), que son:

  • Un máximo de 4 KB por cookie incluyendo todos los datos, nombre, caducidad, etc. (no sólo el valor de la cookie).
  • 20 Cookies por nombre de dominio o de host único.
  • Un máximo de 300 cookies en total. Al superar esta cantidad, se van eliminando las cookies más viejas y se van reemplazando por las nuevas.

Otra característica de las cookies que debemos conocer, es que en principio su seguridad es muy baja, ya que los datos se guardan en archivos públicos sin ningún tipo de encriptación, además de que un mismo equipo podría ser usado por 2 usuarios diferentes con la misma cuenta, por lo que no deberían guardarse datos como contraseñas, más bien los datos deberían ser de tipo "preferencias", por ejemplo si un usuario prefiera un idioma en una Web con varios idiomas, o un tipo de diseño o colores.

En JavaScript se pueden manejar los cookies con document.cookie la forma más sencilla de hacer una cookie sería:

document.cookie = "nombre_cookie=valor_cookie";

Esto crearía una cookie, pero está sería eliminada al acabar la sesión al no haber establecido una fecha de caducidad. Un ejemplo de creación de cookie con todos los datos posibles en JavaScript, sería:

document.cookie = "nombre_cookie=valor_cookie; expires=Sat, 31 Jul 2010 00:32:06 UTC; path=/; secure";

Como vemos cada valor de la cookies, debe estar separado por un ';' punto y coma. Cuidado al final donde no lo lleva. Los datos serían:

nombre_cookie El nombre que la queramos dar.
valor_cookie El valor que contiene.
expires=Fecha-GMT La fecha de caducidad. Debe ir en formato GMT, en JavaScript existe el método "toGMTString", por lo que no habría demasiado problema.
path=/ La cadena que debe contener el path, para que la cookie pueda ser aplicada, por ejemplo si ponemos 'path=/xxx' se aplicaría donde el path inicial fuera 'dominio.com/xxx/lo_que_sea', mientras que con 'path=/' se aplicaría a todo el dominio.
secure Si introducimos este valor, la cookie sólo se enviará en conexiones seguras (https).


El ejemplo mostrado tiene cuatro funciones:

crearCookie
Crea una cookie. Recibe como valores, por este orden, el nombre de la cookie, el valor de la cookie, los días que se mantendrá la cookie, el path para ser aplicada la cookie y si es cookie para conexiones cifradas.
Lo que hace es primero establecer la fecha actual y sumarle los días para que caduque, después añade el path y "secure" si procede.

sVerTodasCookie
Retorna todas las cookies del dominio (y path). Simplemente devuelve el valor de sVerTodasCookie.

sValorCookie
Devuelve el valor de una cookie pasada. Recibe el nombre de la cookie.
Las cookies, son pasadas separadas por ';', por lo que lo primero que hace es cortarlas para pasarlas a un array. A continuación las recoorre buscando el nombre de la cookie y coge su valor en caso de encontrarla.

eliminarCookie
Recibe el nombre de la cookie y el path.
Para eliminar una cookie, se la debe actualizar su fecha de caducidad a una fecha pasada. Por lo que lo que hace esta función es llamar a la función crearCookie pasandole -1 día. La cookie, es eliminada al finalizar la sesión, no inmediatamente.


En el HEAD:
<script language="javascript">
// Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente<!--
// Copyright © McAnam.com
// http://www.mcanam.com/articulos/JavaScript.php?id=28

    function crearCookie(sNombre, sValor, iDiasCaducidad, sDireccion, bSeguro){
        
        var sCadena = sNombre + "=" + sValor + "; ";
        
        iDiasCaducidad = parseInt(iDiasCaducidad);
        
        if (iDiasCaducidad > 0)
        {
        
            var fFecha = new Date();
            
            // El resultado de horas(24) por minutos(60) por segundos(60) por milisegundos(1000)
            fFecha.setTime(fFecha.getTime() + (iDiasCaducidad * 86400000));
            
            sCadena += "expires=" + fFecha.toGMTString() + "; ";
            
        }
        
        if (sDireccion)
            sCadena += "path=" + sDireccion;
        else
            sCadena += "path=/";
            
        if (bSeguro)
            sCadena += "; secure";
            
        
        document.cookie = sCadena;
        
    }
    
    function sVerTodasCookie(){
        
        return document.cookie;
        
    }
    
    function sValorCookie(sNombre){
        
        aCookies = document.cookie.split("; ");
        
        for (var iCont = 0 ; iCont < aCookies.length ; iCont ++)
            if (aCookies[iCont].indexOf(sNombre + "=", 0) == 0)
                return aCookies[iCont].substring(sNombre.length + 1);
                
        return false;
        
        
    }
    
    function eliminarCookie(sNombre, sDireccion)
    {
        crearCookie(sNombre, "", -1, sDireccion);
    }
    
//-->    
</script>

En el BODY:
<table><tr>
    <td>
        <table cellspacing="0" cellpadding="3" bgcolor="#eeeeee" bordercolor="#c4d8f2" border="0">
            <tr>
                <td bgcolor='#c4d8f2' align='center'>Nombre</td>
                <td bgcolor='#c4d8f2' align='center'>Valor</td>
                <td bgcolor='#c4d8f2' align='center'>Dias para Caducidad</td>
                <td bgcolor='#c4d8f2' align='center'>URL</td>
                <td bgcolor='#c4d8f2' align='center'>Cifrado seguro</td>
            </tr>
            <tr>
                <td><input type="text" name="nombre" id="nombre"></td>
                <td><input type="text" name="valor" id="valor"></td>
                <td><input type="text" name="diascaducidad" id="diascaducidad"></td>
                <td><input type="text" name="url" id="url"></td>
                <td align="center"><input type="checkbox" name="seguro" id="seguro"></td>
            </tr>
        </table>
    </td>
    <td>
        <input type="button" value="Crear Cookie" onclick="crearCookie(document.getElementById('nombre').value, document.getElementById('valor').value, document.getElementById('diascaducidad').value, document.getElementById('url').value, document.getElementById('seguro').checked);">
    </td>
</tr></table>

<br /><br />

<a href="javascript:alert(sVerTodasCookie())">Ver todas las cookies</a>

<br /><br />

Nombre variable:
<td><input type="text" name="nombre2" id="nombre2"></td>
<input type="button" value="Ver valor de Cookie" onclick="alert(sValorCookie(document.getElementById('nombre2').value));">

<br /><br /><br />

<table><tr>
    <td>
        <table cellspacing="0" cellpadding="3" bgcolor="#eeeeee" bordercolor="#c4d8f2" border="0">
            <tr>
                <td bgcolor='#c4d8f2' align='center'>Nombre</td>
                <td bgcolor='#c4d8f2' align='center'>URL</td>
            </tr>
            <tr>
                <td><input type="text" name="nombre3" id="nombre3"></td>
                <td><input type="text" name="url3" id="url3"></td>
            </tr>
        </table>
    </td>
    <td>
        <input type="button" value="Eliminar Cookie" onclick="eliminarCookie(document.getElementById('nombre3').value, document.getElementById('url3').value);">
    </td>
</tr></table>

Ejemplo:

Links relacionados:
Recoger datos del sistema (color, fuentes disponibles, etc.)
Establecer conexiones por el puerto http con el objeto XMLHTTP
Ejecutar comandos del navegador con execCommand
Conocer datos del usuario


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com