Differenza tra Local Storage, Session Storage e Cookie in Angular: Una guida completa

Quando si tratta di memorizzare dati lato client, chi sviluppa ha diverse opzioni a disposizione. Vediamo quali!

Capire le differenze tra Local Storage, Session Storage e Cookie

localStorage, sessionStorage e cookie sono tre metodi popolari utilizzati per memorizzare dati all’interno del browser del cliente. Ognuno ha i suoi vantaggi e limitazioni, rendendo cruciale comprendere le differenze per prendere decisioni informate su quale utilizzare in un particolare scenario.

localStorage

L’oggetto localStorage è un meccanismo di memorizzazione client-side che consente alle applicazioni web di salvare dati localmente all’interno del browser dell’utente. È simile a sessionStorage, ma persiste anche dopo che il browser è stato chiuso e riaperto (e questo vale anche per i tab!). Infatti, localStorage può memorizzare una certa quantità significativo di dati, generalmente fino a 5-10 MB, rendendolo adatto per memorizzare informazioni che devono essere mantenute durante diverse sessioni.

Un esempio di implementazione con Angular 12+ è il seguente:

import { Component } from "@angular/core";

@Component({
  selector: "app-example",
  template: `
<p>Nome: {{ nome }}</p>
<button (click)="salvaNome()">Salva nome</button>
`,
})
export class ExampleComponent {
  nome = "";

  constructor() {
    this.nome = localStorage.getItem("nome");
  }

  salvaNome() {
    localStorage.setItem("nome", this.nome);
  }
}

Lo stesso esempio si potrebbe costruire sfruttando i Service di Angular, con il vantaggio di poter centralizzare la gestione di alcune informazioni:

// Servizio
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class LocalStorageService {
  get(key: string) {
    return localStorage.getItem(key);
  }

  set(key: string, value: any) {
    localStorage.setItem(key, value);
  }

  remove(key: string) {
    localStorage.removeItem(key);
  }
}

Il localstorage inoltre non viene scambiato tra client e server, ma è un qualcosa di memorizzato nel browser locale dell’utente. Un esempio classico è la gestione della darkMode di un’applicazione web.

sessionStorage

L’oggetto sessionStorage, d’altra parte, è stato progettato per memorizzare dati per la durata della sessione del browser. Ciò significa che i dati vengono eliminati quando il browser è chiuso o il tab o la finestra viene chiuso. Questo vuol dire che è l’ideale per memorizzare dati che sono necessari solo durante una singola sessione, come applicazioni di prenotazione o pagine che hanno lo scopo di creare un account.

// Componente
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <p>Nome: {{ nome }}</p>
    <button (click)="salvaNome()">Salva nome</button>
  `,
})
export class ExampleComponent {
  nome = '';

  constructor() {
    this.nome = sessionStorage.getItem('nome');
  }

  salvaNome() {
    sessionStorage.setItem('nome', this.nome);
  }
}

Cookie

I cookie sono sempre piccole porzioni di dati memorizzati lato client da un sito web e possono essere utilizzati per memorizzare dati tra diverse richieste o sessioni. I cookie hanno una data di scadenza e possono essere impostati per essere persistenti o session-only. Inoltre, hanno un limite in termini di dimensioni più piccolo rispetto alle altre due opzioni: generalmente parliamo di massimo 4 KB per cookie, e possono essere accessibili e modificati utilizzando, ad esempio, delle API JavaScript.

// Componente
import { Component } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
    selector: 'app-example',
    template: `
    <p>Nome: {{ nome }}</p>
    <button (click)="salvaNome()">Salva nome</button>
  `,
})
export class ExampleComponent {
    nome = '';

    constructor(private cookieService: CookieService) {
        this.nome = this.cookieService.get('nome');
    }

    salvaNome() {
        this.cookieService.set('nome', this.nome);
    }
}

Differenze Chiave

Ecco alcune differenze chiave tra Local Storage, Session Storage e Cookies:

• Persistenza: Local Storage persiste anche dopo che il browser è stato chiuso e riaperto, mentre Session Storage viene eliminato quando il browser è chiuso o il tab o la finestra viene chiuso. I Cookies possono essere impostati per essere persistenti o session-only.
• Limite di stoccaggio: Local Storage può memorizzare fino a 5-10 MB di dati, mentre Session Storage consente di memorizzare un ammontare di dati più grande rispetto ai Cookies. I Cookies hanno un limite di stoccaggio più piccolo, generalmente fino a 4 KB per cookie.
• Gestione automatica: Session Storage non richiede gestione manuale dei dati di scadenza, poiché i dati vengono automaticamente eliminati quando il browser è chiuso o il tab o la finestra viene chiuso. Local Storage non ha un meccanismo di scadenza automatico, mentre i Cookies possono avere una data di scadenza impostata.
• Accesso ai dati: I dati memorizzati in Local Storage e Session Storage possono essere accessibili direttamente utilizzando API JavaScript, fornendo accesso facile e manipolazione. I Cookies possono essere accessibili e modificati utilizzando API JavaScript, ma l’accesso è più limitato rispetto a Local Storage e Session Storage.
• Trasporto di rete: I dati memorizzati in Local Storage e Session Storage non vengono inviati al server con ogni richiesta HTTP, riducendo il traffico di rete inutilizzato. I Cookies vengono automaticamente inviati al server con ogni richiesta HTTP per il relativo dominio, aumentando il traffico di rete.

Scegliere il meccanismo di memorizzazione giusto

Quando si decide quale meccanismo di memorizzazione utilizzare, considerare i seguenti fattori:

• Persistenza dei dati: Se i dati devono persistere durante diverse sessioni, Local Storage è una scelta più adatta. Se i dati devono essere disponibili solo durante la sessione dell’utente, Session Storage è più adatto.
• Dimensione dei dati: Se i dati sono piccoli, i Cookies potrebbero essere sufficienti. Per ammontare di dati più grandi, Local Storage è più adatto.
• Sicurezza: Se i dati sono sensibili, Local Storage o Session Storage potrebbero essere una scelta più adatta a causa della loro natura client-side.

In altre parole, Local Storage, Session Storage e Cookie sono tre modi diversi di gestire le informazioni relative ai dati che viaggiano nelle request degli utenti.

Comprendere le differenze è cruciale per prendere decisioni informate su quale utilizzare in un particolare scenario. Considerando fattori come persistenza dei dati, dimensione dei dati e sicurezza, chi sviluppa può scegliere il meccanismo di memorizzazione più adatto per le loro applicazioni web.