JavaScript

Tema 8 · LocalStorage per a aplicacions d'enginyeria

Introducció

LocalStorage permet desar parelles clau-valor al navegador de forma persistent. Les dades no s'esborren en tancar la pestanya, cosa que el fa ideal per guardar configuracions d'equips, preferències d'usuari, lectures recents de sensors o llistes de components sense necessitat de servidor.

Objectius

  • Guardar i recuperar dades amb localStorage.setItem() i getItem()
  • Emmagatzemar objectes JavaScript com a JSON
  • Eliminar dades amb removeItem() i netejar tot l'emmagatzematge
  • Crear una aplicació que recordi l'estat entre sessions

Funcions bàsiques de LocalStorage

Guardar i recuperar paràmetres de configuració d'una màquina:

// Guardar valors simples
localStorage.setItem('tensio_maxima', '250');
localStorage.setItem('unitats', 'V');

// Recuperar
const tensioMax = localStorage.getItem('tensio_maxima');
console.log(`Tensió màxima configurada: ${tensioMax} V`);

// Guardar un objecte com JSON
const configuracio = {
  motor: 'MTR-400',
  rpm: 1450,
  actiu: true
};
localStorage.setItem('config_maquina', JSON.stringify(configuracio));

// Recuperar l'objecte
const savedConfig = JSON.parse(localStorage.getItem('config_maquina'));
console.log(`Motor: ${savedConfig.motor}, RPM: ${savedConfig.rpm}`);

Exemple: formulari amb persistència

Formulari que recorda els valors introduïts encara que es tanqui la pestanya:

// Desa automàticament en canviar qualsevol camp
document.querySelectorAll('#form-config input').forEach(input => {
  input.addEventListener('input', () => {
    localStorage.setItem(input.id, input.value);
  });
});

// En carregar la pàgina, restaura els valors
window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('#form-config input').forEach(input => {
    const valorGuardat = localStorage.getItem(input.id);
    if (valorGuardat) input.value = valorGuardat;
  });
});

Exercicis

  1. Crea un formulari amb tres camps (nom de l'equip, potència, data de revisió) i fes que es guardin automàticament a LocalStorage.
  2. Implementa un botó "Esborrar dades" que netegi totes les configuracions guardades.
  3. Dissenya un petit registre de manteniment: permet afegir entrades (data i descripció), mostrar-les en una llista i desar-les a LocalStorage com a array d'objectes.

Mini Projecte – Registre de manteniment d'equips

Construeix una aplicació web que gestioni un registre de manteniment d'equips d'un laboratori d'enginyeria:

  • Un formulari per afegir una entrada de manteniment: data, equip, tècnic, descripció i cost.
  • Les entrades es mostren en una taula a sota del formulari.
  • Totes les dades es guarden a LocalStorage (array d'objectes) perquè persisteixin en tancar el navegador.
  • Un botó per esborrar totes les entrades (amb confirmació).
  • Un botó per exportar el registre actual com a fitxer JSON descarregable.

Pista: recupera l'array de LocalStorage, afegeix la nova entrada, i torna a guardar-lo. Per a l'exportació, crea un Blob i un enllaç de descàrrega.

Tema 7 Índex Tema 9