Cookies

Què són les cookies

Les cookies (galetes) són dades guardades localment que s'identifiquen amb un nom i contenen un valor, i que estan relacionades amb un domini web concret.

Cada navegador web gestiona independentment les seves cookies.

Històricament es guardava cada cookie individual en un petit fitxer de text a un directori predeterminat, però els navegadors actuals utilitzen bases de dades (per exemple SQLite) per emmagatzemar-les.

Les cookies tenen un temps de vida determinat que s'especifica quan es creen.
Un cop una cookie ha caducat, és eliminada automàticament pel navegador.

Si no s'especifica un temps de vida, les cookies s'eliminen en el moment en que es tanca el navegador web.

Mida de les cookies

La suma total de les cookies per un domini no pot superar les 4096 bytes, amb un límit màxim de 1024 bytes per una cookie individual, incloent tots els caràcters que la composen (nom, valor i temps de vida).

Per seguretat es limita el nombre màxim de cookies per un domini per evitar atacs a l'ordinador client, per exemple d'una web que generi cookies infinitament fins omplir el disc de l'usuari.

Accés a cookies des del back-end

Les cookies associades a una pàgina s'envien automàticament al servidor web amb cada petició HTTP o HTTPS, i així obtenir accés al seu contingut.
Com més cookies tinguem, més dades es transferiran entre client i servidor a cada petició, fent-la més lenta.
Si només necessitem tenir les dades a la banda client, és preferible utilitzar l'emmagatzematge local.

Document: cookie property
Cookies

Usos de les cookies

• emmagatzemar variables
  per exemple per guardar el valor de camps d'un formulari i que així l'usuari no els hagi de tornar a escriure el proper cop que accedeixi
• recordar preferències de l'usuari
  per guardar paràmetres configurables d'una pàgina, com ara l'idioma seleccionat, tema visual, etc.
• fer un seguiment de les activitats de l'usuari
  rastrejar les pàgines d'una web que un usuari ha visitat per personalitzar publicitat
• autenticació
  per mantenir un usuari identificat un cop accedeix a una web

Creació d'una cookie

Per crear una cookie amb JavaScript hem d'assignar-la a la propietat document.cookie, això la afegirà a la llista de cookies del domini:

// Sense temps d'expiració, s'esborrarà quan tanquem el navegador
document.cookie = "usuari=Joan";

// Amb data i hora d'expiració
document.cookie = "usuari=Joan; expires=Mon, 19 Dec 2033 15:00:00 GMT";

Les noves cookies s'afegeixen a les ja existents

Quan assignem un valor a document.cookie, internament JavaScript utilitza un setter que s'encarrega d'afegir-lo a la llista. No estem sobreescrivint el valor d'una propietat.

Cookies en fitxers locals

Per raons de seguretat, els navegadors moderns no permeten la creació de cookies quan es treballa amb fitxers locals (prefix file://).
Per poder utilitzar-les cal treballar des d'un servidor al qual accedim a través dels protocols HTTP o HTTPS.

Lectura de cookies

El navegador no ens retornarà el valor d'una cookie individual.
En llegir el valor de document.cookie ens retornarà una cadena amb totes les cookies assginades al domini en forma de parelles clau=valor i separades per punt i coma i un espai.

var totesLesCookies = document.cookie;

Resultat: "cookie1=valor1; cookie2=valor2; cookie3=valor3;"

Cal fer un tractament posterior de les dades per aïllar la cookie concreta que ens interessa, per exemple utilitzant una funció com aquesta.

Modificació d'una cookie

Per modificar el valor d'una cookie només cal tornar-la a declarar amb el mateix nom.
Es sobreescriurà la cookie antiga.

document.cookie = "usuari=Pere; expires=Mon, 19 Dec 2033 15:00:00 GMT";

Esborrat d'una cookie

Per esborrar una cookie no hi ha una instrucció concreta, el que cal fer és modificar-la posant-li una data d'expiració ja passada.
El navegador la eliminarà immediatament després de modificar-la perquè detectarà que ja ha caducat.

document.cookie = "usuari=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Funcions per manipular cookies

setCookie()

Exemple de funció per crear una cookie

function setCookie( nom, valor, caducitat )
{
    var d = new Date();
    d.setTime( d.getTime() + caducitat );
    var expira = "expires=" + d.toGMTString();

    document.cookie = nom + "=" + valor + "; " +  expira;
}

getCookie()

Exemple de funció per llegir una cookie individual

function getCookie( nomCookie )
{
    var nom = nomCookie + "=";
    var arrayCookies = document.cookie.split( ';' );

    for( let i = 0; i < arrayCookies.length; i++ )
    {
      var c = arrayCookies[ i ].trim();

      if ( c.indexOf( nom ) == 0 )
            return c.substring(nom.length, c.length) ;
    }
    return "";
}

Exemples

• Crear i llegir cookies