Articles
Introduzione a TypeScript
TypeScript e StorageManager

TypeScript e StorageManager

Questo articolo spiega TypeScript e StorageManager.

Forniamo esempi pratici per spiegare TypeScript e StorageManager.

YouTube Video

TypeScript e StorageManager

Che cos'è StorageManager?

StorageManager è un'API che consente alle applicazioni web di stimare quanto spazio di archiviazione stanno utilizzando e quanta capacità è disponibile. Fornisce inoltre una richiesta di persistenza (persist()) per impedire la rimozione automatica dei dati da parte dell'utente o del browser. Questo ti consente di controllare se c'è abbastanza spazio libero o se i dati verranno eliminati automaticamente, ad esempio quando si archiviano grandi quantità di dati in IndexedDB per applicazioni offline.

Rilevamento delle Funzionalità

Per prima cosa, verifica se il browser supporta navigator.storage.

 1// TypeScript: feature detection for StorageManager
 2function supportsStorageManager(): boolean {
 3  return typeof navigator !== "undefined" &&
 4         typeof navigator.storage !== "undefined" &&
 5         typeof navigator.storage.estimate === "function";
 6}
 7
 8// Example usage
 9if (supportsStorageManager()) {
10  console.log("StorageManager is supported.");
11} else {
12  console.warn("StorageManager not supported. Falling back to localStorage or IndexedDB.");
13}
  • Questa funzione verifica la disponibilità dell'API StorageManager a più livelli.
  • Poiché navigator.storage non esiste in alcuni browser come Safari, è importante verificare la sua esistenza in modo sicuro tramite typeof.

Stima dell'Utilizzo dello Spazio di Archiviazione (estimate())

Dopo aver verificato la funzionalità con supportsStorageManager(), ottieni l'utilizzo (usage) e la quota (quota) da navigator.storage.estimate().

 1// TypeScript: safely get storage estimate
 2async function getStorageEstimate(): Promise<{ usage: number; quota: number } | null> {
 3  if (!supportsStorageManager()) {
 4    console.warn("StorageManager not supported.");
 5    return null;
 6  }
 7
 8  const estimate = await navigator.storage.estimate();
 9  return { usage: estimate.usage ?? 0, quota: estimate.quota ?? 0 };
10}
11
12// Example usage
13getStorageEstimate().then(result => {
14  if (result) {
15    console.log(`Usage: ${result.usage} bytes / Quota: ${result.quota} bytes`);
16  }
17});
  • Questa funzione funziona sempre in modo sicuro e restituisce null se il browser non la supporta.
  • usage e quota sono stime e possono variare da browser a browser.

Richiesta di Persistenza dei Dati (persist())

Usa persist() per richiedere la persistenza in modo che dati importanti (ad esempio, cache offline) non siano soggetti alla cancellazione automatica da parte del browser. Tuttavia, non riesce in tutti gli ambienti.

 1// TypeScript: safely request persistent storage
 2async function requestPersistence(): Promise<boolean> {
 3  if (!supportsStorageManager()) {
 4    console.warn("StorageManager not supported.");
 5    return false;
 6  }
 7
 8  if (typeof navigator.storage.persist !== "function") {
 9    console.warn("persist() not available in this browser.");
10    return false;
11  }
12
13  try {
14    const granted = await navigator.storage.persist();
15    return Boolean(granted);
16  } catch (err) {
17    console.error("persist() error:", err);
18    return false;
19  }
20}
21
22// Example usage
23requestPersistence().then(granted => {
24  console.log("Persistence granted?", granted);
25});
  • Se persist() ha successo, i dati non verranno eliminati automaticamente dal browser, tranne in caso di intervento manuale dell'utente. Tuttavia, le richieste possono essere rifiutate a seconda delle azioni dell'utente o delle impostazioni del browser.

Controlla lo Spazio Disponibile Prima di Salvare i Dati

Verifica lo spazio disponibile prima di salvare grandi quantità di dati per evitare errori di scrittura (QuotaExceededError).

 1// TypeScript: ensure enough space before writing
 2async function ensureSpaceAndWrite(neededBytes: number, writeFn: () => Promise<void>): Promise<boolean> {
 3  const estimate = await getStorageEstimate();
 4  if (!estimate) {
 5    console.warn("Cannot check storage space. Proceeding without validation.");
 6    await writeFn();
 7    return true;
 8  }
 9
10  const free = estimate.quota - estimate.usage;
11  if (free < neededBytes) {
12    console.warn(`Not enough space. Free: ${free} bytes, needed: ${neededBytes} bytes.`);
13    return false;
14  }
15
16  await writeFn();
17  return true;
18}
19
20// Example usage
21ensureSpaceAndWrite(10 * 1024 * 1024, async () => {
22  console.log("Saving large data...");
23});
  • Controllando lo spazio disponibile prima di salvare, puoi ridurre il rischio di interruzioni di scrittura a causa di capacità insufficiente.

Gestione Type-Safe di localStorage in TypeScript

localStorage è comodo per memorizzare dati di configurazione leggeri e informazioni simili.

La seguente classe usa i generics per creare un wrapper type-safe.

 1// TypeScript: typed localStorage wrapper
 2type Serializer<T> = {
 3  serialize: (v: T) => string;
 4  deserialize: (s: string) => T;
 5};
 6
 7class TypedLocalStorage<K extends string, V> {
 8  constructor(private storage: Storage, private serializer: Serializer<V>) {}
 9
10  set(key: K, value: V): void {
11    this.storage.setItem(key, this.serializer.serialize(value));
12  }
13
14  get(key: K): V | null {
15    const raw = this.storage.getItem(key);
16    if (raw === null) return null;
17    try {
18      return this.serializer.deserialize(raw);
19    } catch {
20      return null;
21    }
22  }
23
24  remove(key: K): void {
25    this.storage.removeItem(key);
26  }
27
28  clear(): void {
29    this.storage.clear();
30  }
31}
32
33// Example usage
34const jsonSerializer: Serializer<any> = {
35  serialize: v => JSON.stringify(v),
36  deserialize: s => JSON.parse(s),
37};
38
39const appStorage = new TypedLocalStorage<'theme' | 'token', any>(localStorage, jsonSerializer);
40appStorage.set('theme', { dark: true });
41console.log(appStorage.get('theme'));
  • Questa classe aiuta a ridurre il rischio di memorizzare o recuperare dati con il tipo sbagliato.

Considerazioni Pratiche e Best Practice

  • Verifica sempre se il browser supporta StorageManager Poiché StorageManager è un'API relativamente nuova, conferma sempre la sua esistenza prima dell’uso.

  • Presta attenzione ai limiti di archiviazione e alla compatibilità Il valore restituito da estimate() varia a seconda del browser ed è solo una stima.

  • Progetta tenendo conto delle API asincrone estimate() e persist() sono API asincrone basate su promise. Progetta il tuo codice in modo da non bloccare l'interfaccia utente.

  • Considerazioni sulla Sicurezza Non memorizzare informazioni sensibili come token di accesso in localStorage. Considera l’utilizzo di cookie HttpOnly o la crittografia se possibile.

  • Progettazione dei fallback Se supportsStorageManager() restituisce falso, fornisci una logica per passare all'utilizzo di solo localStorage o IndexedDB.

Riepilogo

Con il rilevamento delle funzionalità tramite supportsStorageManager(), puoi supportare in sicurezza tutti gli ambienti, controllare l’utilizzo e la quota con navigator.storage.estimate() e richiedere la persistenza con persist(). In TypeScript, usa funzioni di wrapper e definizioni di tipo per scrivere codice leggibile e sicuro. Il flusso di base è: controllare l’esistenza, stimare, richiedere la persistenza e verificare la capacità prima di scrivere nello storage.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

TypeScript e IndexedDB