informaticaPC

Tutorial de JavaScript

Cookies en JavaScript

Cookies en JavaScript

Las cookies (o 'galletas', en español) son pequeños archivos que las páginas web guardan (opcionalmente) en el navegador web del usuario, con el fin de guardar configuraciones y obtener otros datos (algunos sitios web las utilizan para recoger información sobre nuestros hábitos y preferencias de navegación, entre otras cosas).

Crear una cookie

Para usar Cookies en JavaScript en primer lugar hemos de comprobar si están activas en el navegador web del usuario, del siguiente modo:

if( navigator.cookieEnabled == true ) {
    alert("El uso de cookies está activado");
}
else {
    alert("El uso de cookies está desactivado");
}

Las Cookies se crean usando la propiedad cookie del objeto Document(), al cual debemos pasar una cadena indicando las siguientes secciones separadas con punto y coma, seguido de un espacio:

  • Nombre y valor de la cookie.
  • Fecha de expiración.
  • Ruta en la que será guardada.

En el siguiente ejemplo creamos dos cookies:

document.cookie = "miCookie1=pepe; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie2=557; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
Información

Es muy importante que la estructura de la cadena para la creación de la cookie sea correcta.

Información

Para que los ejemplos con cookies funcionen, debes cargar la página web desde un servidor web (no funcionará si se abre el archivo haciendo doble clic sobre él).

Acceder a las cookies guardadas

Para acceder a las cookies usaremos también la propiedad cookies del Document(), con la que las obtendremos en una cadena de texto:

var misCookies = document.cookie;
document.write( "COOKIES: [" + misCookies + "]" );

Veríamos algo como:

Leer una cookie

Observa que hay un espacio después del punto y coma de cada cookie creada, a partir de la segunda.

Para leer el valor de cada sección de la cookie debemos obtener la parte de la cadena en que se encuentra (teniendo en cuenta los delimitadores de la misma).

En el siguiente ejemplo creamos unas cookies y a continuación mostramos sus respectivos valores, a partir de la cadena obtenida:

// Crear las Cookies:
document.cookie = "miCookie1=APRENDERinformática_1; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie2=APRENDERinformática_2; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie3=APRENDERinformática_3; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";

// Mostrar la cadena con las cookies:
document.write( "COOKIES:" + document.cookie + "<p />" );

// Obtener un array con el nombre y valor de una cookie guardados como cadena, en cada posición:
var aCookies = document.cookie.split(";");

// Variables auxiliares:
var contador;
var posicionSignoIgual;
var nombreCookie;
var valorCookie;

for( contador=0; contador < aCookies.length; contador++ )
{
    // Obtenemos la posición en la que está el signo igual
    // No lo ponemos fuera del bucle porque los nombres puede que no tengan la misma longitud
    posicionSignoIgual = aCookies[contador].indexOf("=");

    // Obtenemos el nombre de la cookie, eliminando espacios
    nombreCookie = aCookies[contador].substring( 0, posicionSignoIgual ).replace(" ", "");

    // Añadimos 1 'posicionSignoIgual' porque con substring() las posiciones de la cadena comienzan desde cero:
    valorCookie = aCookies[contador].substring( posicionSignoIgual + 1 );

    // Mostramos el valor
    document.write( "[" + nombreCookie + "] = [" + valorCookie + "]<br />" );
}

Descargar ejemplo

Se mostraría algo como lo siguiente:

Leer una cookie

Modificando un poco el ejemplo anterior podríamos crear una función, que nos devuelva el valor de la cookie que indiquemos:

function leerCookie( nombre_cookie )
{
    // Obtener un array con el nombre y valor de una cookie guardados como cadena, en cada posición:
    var aCookies = document.cookie.split(";");

    // Variables auxiliares:
    var contador;
    var posicionSignoIgual;
    var nombreCookie;
    var valorCookie;

    for( contador=0; contador < aCookies.length; contador++ )
    {
        // Obtenemos la posición en la que está el signo igual
        // No lo ponemos fuera del bucle porque los nombres puede que no tengan la misma longitud
        posicionSignoIgual = aCookies[contador].indexOf("=");

        // Obtenemos el nombre de la Cookie, eliminando espacios
        nombreCookie = aCookies[contador].substring( 0, posicionSignoIgual ).replace(" ", "");

        if( nombreCookie == nombre_cookie )
        {
            // Añadimos 1 'posicionSignoIgual' porque con substring() las posiciones de la cadena comienzan desde cero:
            valorCookie = aCookies[contador].substring( posicionSignoIgual + 1 );
        }

    }

    return valorCookie;
}

// --------------------

// Creamos las cookies:
document.cookie = "miCookie1=APRENDERinformática_1; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie2=APRENDERinformática_2; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie3=APRENDERinformática_3; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";

// Obtenemos el valor de una de ellas:
var valor = leerCookie( "miCookie2" ) ;

if( valor != undefined )
    document.write("<p>El valor de 'miCookie2' es [" + valor + "]</p>" );
else
    alert("<p>No se encontró la Cookie.</p>" );

Descargar ejemplo

Información

Al crear y acceder a las cookies hemos de escribir su nombre respetando mayúsculas y minúsculas.

Borrar cookies

Para borrar una cookie basta simplemente con asignarle una fecha anterior, por ejemplo:

document.cookie = "miCookie1=pepe; expires=Sat, 11 Dec 1999 12:00:00 UTC; path=/";
Primera página Anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso