Articles
Panimula sa TypeScript
TypeScript at StorageManager

TypeScript at StorageManager

Ipinaliliwanag ng artikulong ito ang TypeScript at StorageManager.

Nagbibigay kami ng mga praktikal na halimbawa upang ipaliwanag ang TypeScript at StorageManager.

YouTube Video

TypeScript at StorageManager

Ano ang StorageManager?

Ang StorageManager ay isang API na nagpapahintulot sa mga web application na tantiyahin kung gaano karaming storage ang ginagamit at gaano kalaki ang natitirang kapasidad. Nagbibigay din ito ng persistence request (persist()) upang maiwasan ang awtomatikong pagtanggal ng data ng user o browser. Dahil dito, maaari mong malaman kung sapat ang libreng espasyo o kung may posibilidad na awtomatikong mabura ang data, gaya kapag nag-iimbak ng malaking datos sa IndexedDB para sa offline na aplikasyon.

Pag-detect ng Feature

Una, tiyakin kung sinusuportahan ng browser ang 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}
  • Tinitiyak ng function na ito ang pagkakaroon ng StorageManager API sa bawat yugto.
  • Dahil ang navigator.storage ay maaaring hindi available sa ilang browser gaya ng Safari, mahalaga na kumpirmahin ang pag-iral nito nang ligtas gamit ang typeof.

Tantiya ng Paggamit ng Storage (estimate())

Pagkatapos suriin ang functionality gamit ang supportsStorageManager(), kunin ang paggamit (usage) at quota (quota) mula sa 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});
  • Ang function na ito ay laging gumagana nang ligtas at magbabalik ng null kung hindi ito suportado ng browser.
  • Ang usage at quota ay tinatayang halaga at maaaring magkaiba sa bawat browser.

Humiling ng Data Persistence (persist())

Gamitin ang persist() upang hilingin ang persistence para hindi awtomatikong mabura ng browser ang mahahalagang data (hal. offline cache). Gayunpaman, hindi ito palaging matagumpay sa lahat ng environment.

 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});
  • Kung magtagumpay ang persist(), hindi awtomatikong buburahin ng browser ang data, maliban na lamang kung mano-manong gagawin ito ng user. Gayunpaman, maaaring tanggihan ang mga request ayon sa aksyon ng user o mga setting ng browser.

Tiyakin ang Available na Storage Bago Mag-save ng Data

Suriin muna ang libreng espasyo bago mag-save ng malaking data upang maiwasan ang pagkakabigo ng pagsulat (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});
  • Sa pamamagitan ng pag-check ng available storage bago mag-save, mababawasan mo ang panganib ng pagkaantala ng pagsulat bunsod ng kakulangan sa kapasidad.

Type-Safe na Pamamahala ng localStorage sa TypeScript

Ang localStorage ay maginhawa para sa pag-iimbak ng magagaan na configuration data at katulad na impormasyon.

Ang sumusunod na klase ay gumagamit ng generics upang makabuo ng type-safe wrapper.

 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'));
  • Ang klase na ito ay tumutulong mabawasan ang panganib ng maling uri ng data sa pag-store o pagkuha.

Mga Praktikal na Pagsasaalang-alang at Pinakamahuhusay na Gawi

  • Laging suriin kung sinusuportahan ng browser ang StorageManager Dahil bago pa lamang ang StorageManager bilang isang API, tiyaking nariyan ito bago gamitin.

  • Bigyang-pansin ang limitasyon at compatibility ng storage Ang halaga na ibinabalik ng estimate() ay nagkakaiba depende sa browser at tinatayang halaga lamang.

  • Isaalang-alang ang Asynchronous APIs sa Disenyo Ang estimate() at persist() ay promise-based asynchronous APIs. I-disenyo ang iyong code para hindi hadlangan ang UI.

  • Mga Pagsusuri sa Seguridad Huwag mag-imbak ng sensitibong impormasyon tulad ng access tokens sa localStorage. Isaalang-alang ang paggamit ng HttpOnly cookies o encryption kung maaari.

  • Disenyo ng Fallback Kung ang supportsStorageManager() ay magbalik ng false, magbigay ng solusyon para gumamit na lang ng localStorage o IndexedDB.

Buod

Sa pamamagitan ng feature detection gamit ang supportsStorageManager(), maaari mong suportahan nang ligtas ang lahat ng environment, suriin ang usage at quota gamit ang navigator.storage.estimate(), at humiling ng persistence gamit ang persist(). Sa TypeScript, gumamit ng wrapper functions at type definitions upang magsulat ng malinaw at ligtas na code. Ang pangunahing daloy ay: suriin ang pag-iral, tanteahin, humiling ng persistence, at suriin ang kapasidad bago magsulat sa storage.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

TypeScript at IndexedDB