Cookies en Javascript

Hola a todos, hoy os voy a explicar como funciona las cookies en Javascript.

Las cookies sirven para guardar variables que podemos usar en cualquier parte de nuestra aplicación.

En Javascript, tendremos que usar la variable global document, esta variable tiene una propiedad llamada cookie donde podemos meter estas variables.

Las variables que meteremos siempre tienen el mismo formato:

nombre_variable=valor_variable

Para agregar variables a nuestra cookie, haremos esto:

function init(){

    // Guardo variables en las cookies

    document.cookie = "matricula=1234ABC";
    document.cookie = "marca=SEAT";
    document.cookie = "modelo=IBIZA";
    
    console.log(document.cookie);

}

window.onload = init;

Este es el resultado:

Podemos ver las variables desde el navegador como en Chrome:

Para modificar una variable, hacemos lo siguiente:

function init(){

    // Guardo variables en las cookies

    document.cookie = "matricula=1234ABC";
    document.cookie = "marca=SEAT";
    document.cookie = "modelo=IBIZA";
    
    console.log(document.cookie);

    // Modifico la variable matricula

    document.cookie = "matricula=5678DEF";

    console.log(document.cookie);

}

window.onload = init;

Este es el resultado:

Para eliminar variables, lo podemos hacer de dos formas, una es con max-age=0.

function init(){

    // Guardo variables en las cookies

    document.cookie = "matricula=1234ABC";
    document.cookie = "marca=SEAT";
    document.cookie = "modelo=IBIZA";
    
    console.log(document.cookie);

    // Modifico la variable matricula

    document.cookie = "matricula=5678DEF";

    console.log(document.cookie);

    // Elimina la variable matricula con max-age

    document.cookie = "matricula=; max-age=0";
    
    console.log(document.cookie);

}

window.onload = init;

Este es el resultado:

Y la otra es con expires.

function init(){

    // Guardo variables en las cookies

    document.cookie = "matricula=1234ABC";
    document.cookie = "marca=SEAT";
    document.cookie = "modelo=IBIZA";
    
    console.log(document.cookie);

    // Modifico la variable matricula

    document.cookie = "matricula=5678DEF";

    console.log(document.cookie);

    // Elimina la variable matricula con max-age

    document.cookie = "matricula=; max-age=0";
    
    console.log(document.cookie);

    // vuelvo a crear la variable de matricula

    document.cookie = "matricula=9876GHI";

    console.log(document.cookie);

    // Elimina la variable matricula con expires

    document.cookie = "matricula=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

    console.log(document.cookie);
}

window.onload = init;

Este es el resultado:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.