TypeScript en StorageManager

Dit artikel legt TypeScript en StorageManager uit.

We bieden praktische voorbeelden om TypeScript en StorageManager uit te leggen.

YouTube Video

TypeScript en StorageManager

Wat is StorageManager?

StorageManager is een API waarmee webapplicaties kunnen inschatten hoeveel opslagruimte ze gebruiken en hoeveel capaciteit er beschikbaar is. Het biedt ook een persistentieverzoek (persist()) om automatisch verwijderen van gegevens door de gebruiker of de browser te voorkomen. Hiermee kun je controleren of er voldoende vrije ruimte is of dat gegevens automatisch worden verwijderd, bijvoorbeeld bij het opslaan van grote hoeveelheden data in IndexedDB voor offline toepassingen.

Functiedetectie

Controleer eerst of de browser navigator.storage ondersteunt.

 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}

• Deze functie controleert stapsgewijs of de StorageManager API beschikbaar is.
• Omdat navigator.storage in sommige browsers zoals Safari niet bestaat, is het belangrijk het bestaan ervan veilig te controleren met behulp van typeof.

Schat gebruik van opslagruimte (estimate())

Nadat je de functionaliteit hebt gecontroleerd met supportsStorageManager(), haal je het gebruik (usage) en het quotum (quota) op via 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});

• Deze functie werkt altijd veilig en retourneert null als de browser het niet ondersteunt.
• usage en quota zijn schattingen en kunnen per browser verschillen.

Vraag gegevenspersistentie aan (persist())

Gebruik persist() om persistentie aan te vragen, zodat belangrijke gegevens (bijv. offline cache) niet automatisch worden verwijderd door de browser. Het is echter niet in alle omgevingen succesvol.

 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});

• Als persist() slaagt, worden de gegevens niet automatisch verwijderd door de browser, behalve door handmatige tussenkomst van de gebruiker. Verzoeken kunnen echter worden geweigerd, afhankelijk van gebruikersacties of browserinstellingen.

Controleer beschikbare opslagruimte voordat je gegevens opslaat

Controleer de beschikbare ruimte voordat je grote gegevens opslaat om schrijffouten (QuotaExceededError) te voorkomen.

 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});

• Door de beschikbare opslagruimte te controleren voordat je opslaat, verklein je het risico op onderbrekingen door onvoldoende capaciteit.

Type-veilig omgaan met localStorage in TypeScript

localStorage is handig voor het opslaan van lichte configuratiegegevens en vergelijkbare informatie.

De volgende klasse gebruikt generics om een type-veilige wrapper te maken.

 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'));

• Deze klasse helpt het risico te verkleinen op het opslaan of ophalen van gegevens met het verkeerde type.

Praktische overwegingen en best practices

• Controleer altijd of de browser StorageManager ondersteunt Omdat StorageManager een relatief nieuwe API is, moet je altijd het bestaan ervan bevestigen voordat je deze gebruikt.

• Let op opslaglimieten en compatibiliteit De waarde die door estimate() wordt geretourneerd, verschilt per browser en is slechts een schatting.

• Ontwerp met asynchrone APIs in gedachten estimate() en persist() zijn op promises gebaseerde asynchrone APIs. Ontwerp je code zodat je de gebruikersinterface niet blokkeert.

• Beveiligingsoverwegingen Sla geen gevoelige informatie zoals toegangstokens op in localStorage. Overweeg het gebruik van HttpOnly-cookies of encryptie indien mogelijk.

• Fallback-ontwerp Als supportsStorageManager() false retourneert, forsee dan in logica om alleen localStorage of IndexedDB te gebruiken.

Samenvatting

Met functiedetectie via supportsStorageManager() kun je veilig alle omgevingen ondersteunen, het gebruik en quota controleren met navigator.storage.estimate(), en persistentie aanvragen met persist(). Gebruik in TypeScript wrapperfuncties en typedefinities om leesbare en veilige code te schrijven. De basisstroom is: bestaan controleren, schatten, persistentie aanvragen, en capaciteit controleren voordat je naar de opslag schrijft.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video