Objectes storage

L'objecte Storage de JavaScript, accessible mitjançant localStorage i sessionStorage, forma part de l'API Web Storage i s'utilitza per emmagatzemar dades clau-valor localment al navegador de l'usuari. És una alternativa més moderna i amb més capacitat que les cookies per a l'emmagatzematge de dades persistents de la sessió o a llarg termini.

Tipus d'emmagatzematge web

Hi ha dos tipus d'objectes Storage, que comparteixen les mateixes propietats i mètodes, però difereixen en la seva persistència:

localStorage (Emmagatzematge persistent)

sessionStorage (Emmagatzematge de sessió)

Propietats i mètodes

Tant localStorage com sessionStorage implementen la mateixa interfície Storage. Totes les dades s'emmagatzemen com a parells clau-valor de tipus string.

Propietats

Mètodes

Exemples d'ús

Emmagatzemar dades simples (Strings)

Totes les dades s'emmagatzemen com a strings.

// Utilitzem localStorage
localStorage.setItem('usuari_nom', 'Jordi');
localStorage.setItem('data_login', '2025-09-30');

// Recuperar un valor
const nom = localStorage.getItem('usuari_nom'); // Resultat: "Jordi"

// Eliminar un element
localStorage.removeItem('data_login');

// Comprovar la mida
console.log(localStorage.length); // Resultat: 1 (només queda 'usuari_nom')

 

2. Emmagatzemar objectes o arrays (Necessita Serialització)

Com que Storage només accepta strings, cal convertir els objectes JavaScript a format JSON (string) abans de guardar-los i des-serialitzar-los quan es recuperen.

const configuracio = {
    tema: 'fosc',
    notificacions: true,
    idioma: 'ca'
};

// 🔸 GUARDAR (Serialització a JSON string)
localStorage.setItem('config_usuari', JSON.stringify(configuracio));

// 🔸 RECUPERAR (Des-serialització a Objecte JavaScript)
const configGuardadaJSON = localStorage.getItem('config_usuari');

if (configGuardadaJSON) {
    const configObjecte = JSON.parse(configGuardadaJSON);
    console.log(configObjecte.tema); // Resultat: "fosc"
}

3. Iterar sobre l'emmagatzematge

Pots recórrer tots els elements utilitzant la propietat length i el mètode key().

console.log("Elements de la sessió actual:");

for (let i = 0; i < sessionStorage.length; i++) {
    const clau = sessionStorage.key(i);
    const valor = sessionStorage.getItem(clau);
    console.log(`Clau: ${clau}, Valor: ${valor}`);
}

// Cas d'ús: Auditar o depurar el contingut emmagatzemat.

 

Neteja de l'emmagatzematge

S'utilitza per esborrar totes les dades emmagatzemades al domini actual.

// ATENCIÓ: Esborra TOT el localStorage
function tancarSessio() {
    localStorage.clear();
    sessionStorage.clear();
    console.log("Tots els elements de storage eliminats.");
    // Redirigir a la pàgina de login o inici
    // location.href = '/login';
}

Seguretat i Límits

 

IndexedDB (BBDD al navegador)

El Web Storage (com localStorage i sessionStorage) és excel·lent per a dades clau-valor petites i simples. Tanmateix, per a l'emmagatzematge de dades estructurades, grans volums d'informació, o la necessitat de consultar i indexar registres, JavaScript ofereix una opció molt més robusta: IndexedDB. 

IndexedDB és una API asíncrona de JavaScript per a un emmagatzematge de dades a gran escala i altament estructurat al costat del client. És, essencialment, un sistema de base de dades NoSQL transaccional que resideix al navegador de l'usuari.

Característiques

 

Components

IndexedDB es basa en conceptes que reflecteixen les bases de dades tradicionals:

 

Mètodes i operacions

L'API IndexedDB és complexa i es basa principalment en mètodes de l'objecte IDBRequest (per gestionar les sol·licituds) i l'objecte IDBTransaction.

 

Casos d'ús

A causa de la seva complexitat, IndexedDB s'utilitza principalment quan localStorage no és suficient:

Exemple de recuperació de dades

L'API nativa és molt detallada, però conceptualment es veu així:

// 1. Obtenir la connexió a la base de dades
const request = indexedDB.open('CatalegProductes', 1);

request.onerror = function(event) {
  console.error("Error en obrir la base de dades");
};

request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 2. Iniciar una transacció de lectura
  const transaccio = db.transaction(['productes'], 'readonly');
  const store = transaccio.objectStore('productes');
  
  // 3. Demanar la recuperació d'una clau
  const getRequest = store.get(123);

  getRequest.onsuccess = function(event) {
    console.log("Producte recuperat:", event.target.result);
  };
};

// Aquest procés és asíncron i no bloqueja la UI.

Exemple complet IndexedDB (catàleg llibres)

// Nom i versió de la base de dades
const DB_NAME = 'CatalegLlibresDB';
const DB_VERSION = 1;
const STORE_NAME = 'llibres'; // El nostre magatzem d'objectes (la "taula")

let db; // Variable global per a la connexió a la base de dades

// --- 1. OBRIR I CREAR LA BASE DE DADES (Si no existeix) ---

function obrirDB() {
    return new Promise((resolve, reject) => {
        // Sol·licita obrir la base de dades
        const request = indexedDB.open(DB_NAME, DB_VERSION);

        // Aquest esdeveniment es dispara si la versió de la DB no existeix o és inferior
        request.onupgradeneeded = (event) => {
            db = event.target.result;
            console.log(`Creant o actualitzant magatzem d'objectes: ${STORE_NAME}`);
            
            // Creem l'Object Store (la "taula")
            // Definim 'isbn' com a clau primària (keyPath)
            if (!db.objectStoreNames.contains(STORE_NAME)) {
                db.createObjectStore(STORE_NAME, { keyPath: 'isbn' });
                // També podríem crear un índex per a cerques per 'autor', per exemple
                // store.createIndex('per_autor', 'autor', { unique: false }); 
            }
        };

        request.onsuccess = (event) => {
            db = event.target.result;
            console.log("Base de dades oberta amb èxit!");
            resolve();
        };

        request.onerror = (event) => {
            console.error("Error en obrir la base de dades:", event.target.errorCode);
            reject(new Error("No es pot obrir la DB"));
        };
    });
}

// --- 2. AFegir ELEMENTS (CRUD: Create) ---

function afegirLlibre(llibre) {
    if (!db) {
        console.error("La base de dades no està connectada.");
        return;
    }
    
    // 1. Iniciar una transacció de lectura/escriptura
    const transaccio = db.transaction([STORE_NAME], 'readwrite');
    const store = transaccio.objectStore(STORE_NAME);
    
    // 2. Afegir l'objecte
    const request = store.add(llibre);

    request.onsuccess = () => {
        console.log(`Llibre afegit amb ISBN ${llibre.isbn}`);
    };

    request.onerror = (event) => {
        // Això passa sovint si ja existeix un element amb la mateixa clau (ISBN)
        console.error("Error en afegir el llibre:", event.target.error);
    };
}

// --- 3. CONSULTAR UN ELEMENT PER CLAU (CRUD: Read) ---

function consultarLlibre(isbn) {
    if (!db) {
        console.error("La base de dades no està connectada.");
        return;
    }
    
    // 1. Iniciar una transacció de només lectura
    const transaccio = db.transaction([STORE_NAME], 'readonly');
    const store = transaccio.objectStore(STORE_NAME);
    
    // 2. Recuperar l'element per la seva clau primària (ISBN)
    const request = store.get(isbn);

    request.onsuccess = (event) => {
        const llibre = event.target.result;
        if (llibre) {
            console.log(`\n--- Llibre trobat (ISBN ${isbn}) ---`);
            console.log(llibre);
        } else {
            console.log(`\nNo s'ha trobat cap llibre amb ISBN ${isbn}`);
        }
    };

    request.onerror = (event) => {
        console.error("Error en consultar el llibre:", event.target.error);
    };
}

// --- 4. ELIMINAR UN ELEMENT PER CLAU (CRUD: Delete) ---

function eliminarLlibre(isbn) {
    if (!db) {
        console.error("La base de dades no està connectada.");
        return;
    }

    // 1. Iniciar una transacció de lectura/escriptura
    const transaccio = db.transaction([STORE_NAME], 'readwrite');
    const store = transaccio.objectStore(STORE_NAME);
    
    // 2. Eliminar l'element per la seva clau primària (ISBN)
    const request = store.delete(isbn);

    request.onsuccess = () => {
        console.log(`\nLlibre amb ISBN ${isbn} eliminat correctament.`);
    };

    request.onerror = (event) => {
        console.error("Error en eliminar el llibre:", event.target.error);
    };
}


// --- FLUX D'EXECUCIÓ (Async/Await per simplificar) ---

const llibre1 = { isbn: '978-8426102604', titol: 'El petit príncep', autor: 'Antoine de Saint-Exupéry', any: 1943 };
const llibre2 = { isbn: '978-8429749103', titol: 'Tirant lo Blanc', autor: 'Joanot Martorell', any: 1490 };

// Esperem a que la base de dades estigui oberta abans de fer operacions
obrirDB()
    .then(() => {
        // Afegeix el llibre 1
        afegirLlibre(llibre1);
        
        // Afegeix el llibre 2
        afegirLlibre(llibre2);
        
        // Consulta el llibre 1 després d'un petit retard (per assegurar-nos que s'ha escrit)
        setTimeout(() => consultarLlibre('978-8426102604'), 500);
        
        // Intentem consultar un ISBN que no existeix
        setTimeout(() => consultarLlibre('111-2223334445'), 1000);
        
        // Elimina el llibre 2
        setTimeout(() => eliminarLlibre('978-8429749103'), 1500);

        // Comprovem que s'ha eliminat
        setTimeout(() => consultarLlibre('978-8429749103'), 2000);
    })
    .catch((error) => {
        console.error("No es pot continuar. La DB no s'ha pogut inicialitzar.");
    });