El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem sobre les dues principals formes d'emmagatzematge web proporcionades pels navegadors: l'emmagatzematge local (localStorage) i l'emmagatzematge de sessió (sessionStorage). Aquestes eines són essencials per guardar dades de manera persistent o temporal en el navegador de l'usuari.

Introducció a l'Emmagatzematge Web

Què és l'Emmagatzematge Web?

L'emmagatzematge web és una API que permet als desenvolupadors emmagatzemar dades de manera local dins del navegador de l'usuari. Hi ha dues principals formes d'emmagatzematge web:

localStorage: Permet emmagatzemar dades que persisteixen fins i tot després de tancar el navegador.
sessionStorage: Emmagatzema dades que només persisteixen durant la sessió de navegació actual.

Diferències Clau entre localStorage i sessionStorage

Característica	localStorage	sessionStorage
Persistència	Les dades persisteixen fins que esborrem explícitament	Les dades es perden quan es tanca la pestanya o el navegador
Capacitat	Aproximadament 5-10 MB per origen	Aproximadament 5-10 MB per origen
Àmbit	Disponible per a totes les pestanyes i finestres	Disponible només per a la pestanya o finestra actual
Ús típic	Emmagatzematge de preferències d'usuari, temes, etc.	Emmagatzematge de dades temporals durant la sessió

Utilitzant localStorage

Emmagatzemar Dades

Per emmagatzemar dades en localStorage, utilitzem el mètode setItem:

localStorage.setItem('clau', 'valor');

Recuperar Dades

Per recuperar dades de localStorage, utilitzem el mètode getItem:

let valor = localStorage.getItem('clau');
console.log(valor); // 'valor'

Eliminar Dades

Per eliminar una entrada específica de localStorage, utilitzem el mètode removeItem:

localStorage.removeItem('clau');

Per eliminar totes les dades de localStorage, utilitzem el mètode clear:

localStorage.clear();

Exemple Pràctic

// Emmagatzemar dades
localStorage.setItem('nom', 'Joan');
localStorage.setItem('edat', '30');

// Recuperar dades
let nom = localStorage.getItem('nom');
let edat = localStorage.getItem('edat');
console.log(`Nom: ${nom}, Edat: ${edat}`); // Nom: Joan, Edat: 30

// Eliminar una dada
localStorage.removeItem('edat');

// Comprovar si l'edat ha estat eliminada
edat = localStorage.getItem('edat');
console.log(edat); // null

// Eliminar totes les dades
localStorage.clear();

Utilitzant sessionStorage

Emmagatzemar Dades

Per emmagatzemar dades en sessionStorage, utilitzem el mètode setItem:

sessionStorage.setItem('clau', 'valor');

Recuperar Dades

Per recuperar dades de sessionStorage, utilitzem el mètode getItem:

let valor = sessionStorage.getItem('clau');
console.log(valor); // 'valor'

Eliminar Dades

Per eliminar una entrada específica de sessionStorage, utilitzem el mètode removeItem:

sessionStorage.removeItem('clau');

Per eliminar totes les dades de sessionStorage, utilitzem el mètode clear:

sessionStorage.clear();

Exemple Pràctic

// Emmagatzemar dades
sessionStorage.setItem('sessioID', '12345');
sessionStorage.setItem('usuari', 'Anna');

// Recuperar dades
let sessioID = sessionStorage.getItem('sessioID');
let usuari = sessionStorage.getItem('usuari');
console.log(`Sessió ID: ${sessioID}, Usuari: ${usuari}`); // Sessió ID: 12345, Usuari: Anna

// Eliminar una dada
sessionStorage.removeItem('sessioID');

// Comprovar si la sessió ID ha estat eliminada
sessioID = sessionStorage.getItem('sessioID');
console.log(sessioID); // null

// Eliminar totes les dades
sessionStorage.clear();

Exercicis Pràctics

Exercici 1: Emmagatzematge de Preferències d'Usuari

Descripció: Crea una pàgina web que permeti als usuaris seleccionar un tema (clar o fosc) i emmagatzema la seva preferència utilitzant localStorage. Quan l'usuari torni a carregar la pàgina, el tema seleccionat ha de ser aplicat automàticament.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preferències de Tema</title>
    <style>
        body.clar {
            background-color: white;
            color: black;
        }
        body.fosc {
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Selecciona un Tema</h1>
    <button id="clar">Clar</button>
    <button id="fosc">Fosc</button>

    <script>
        // Funció per aplicar el tema
        function aplicarTema(tema) {
            document.body.className = tema;
            localStorage.setItem('tema', tema);
        }

        // Carregar el tema desat
        let temaDesat = localStorage.getItem('tema');
        if (temaDesat) {
            aplicarTema(temaDesat);
        }

        // Assignar esdeveniments als botons
        document.getElementById('clar').addEventListener('click', () => aplicarTema('clar'));
        document.getElementById('fosc').addEventListener('click', () => aplicarTema('fosc'));
    </script>
</body>
</html>

Exercici 2: Emmagatzematge Temporal de Formularis

Descripció: Crea una pàgina web amb un formulari que emmagatzemi les dades introduïdes en sessionStorage. Si l'usuari tanca la pestanya i la torna a obrir durant la mateixa sessió, les dades del formulari han de ser restaurades automàticament.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulari Temporal</title>
</head>
<body>
    <h1>Formulari Temporal</h1>
    <form id="formulari">
        <label for="nom">Nom:</label>
        <input type="text" id="nom" name="nom"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <button type="submit">Enviar</button>
    </form>

    <script>
        // Funció per desar les dades del formulari
        function desarDades() {
            sessionStorage.setItem('nom', document.getElementById('nom').value);
            sessionStorage.setItem('email', document.getElementById('email').value);
        }

        // Funció per carregar les dades del formulari
        function carregarDades() {
            if (sessionStorage.getItem('nom')) {
                document.getElementById('nom').value = sessionStorage.getItem('nom');
            }
            if (sessionStorage.getItem('email')) {
                document.getElementById('email').value = sessionStorage.getItem('email');
            }
        }

        // Carregar les dades al carregar la pàgina
        window.onload = carregarDades;

        // Desar les dades al canviar els camps del formulari
        document.getElementById('nom').addEventListener('input', desarDades);
        document.getElementById('email').addEventListener('input', desarDades);
    </script>
</body>
</html>

Resum

En aquest tema, hem après sobre les dues principals formes d'emmagatzematge web: localStorage i sessionStorage. Hem vist com emmagatzemar, recuperar i eliminar dades utilitzant aquestes APIs, i hem practicat amb exemples pràctics per consolidar els conceptes apresos. Aquestes eines són molt útils per gestionar dades de manera eficient en aplicacions web, ja sigui per emmagatzemar preferències d'usuari o dades temporals durant una sessió de navegació.

Emmagatzematge Local i de Sessió

Introducció a l'Emmagatzematge Web

Què és l'Emmagatzematge Web?

Diferències Clau entre localStorage i sessionStorage

Utilitzant localStorage

Emmagatzemar Dades

Recuperar Dades

Eliminar Dades

Exemple Pràctic

Utilitzant sessionStorage

Emmagatzemar Dades

Recuperar Dades

Eliminar Dades

Exemple Pràctic

Exercicis Pràctics

Exercici 1: Emmagatzematge de Preferències d'Usuari

Exercici 2: Emmagatzematge Temporal de Formularis

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final