TypeScript dan StorageManager

Artikel ini menerangkan tentang TypeScript dan StorageManager.

Kami menyediakan contoh praktikal untuk menerangkan TypeScript dan StorageManager.

YouTube Video

TypeScript dan StorageManager

Apakah itu StorageManager?

StorageManager ialah API yang membolehkan aplikasi web menganggar berapa banyak storan yang sedang digunakan dan berapa kapasiti yang tersedia. Ia juga menyediakan permintaan ketekalan (persist()) untuk mengelakkan penyingkiran data secara automatik oleh pengguna atau pelayar. Ini membolehkan anda mengawal sama ada terdapat ruang kosong yang mencukupi atau data akan dipadam secara automatik, seperti ketika menyimpan sejumlah besar data dalam IndexedDB untuk aplikasi luar talian.

Pengesanan Ciri

Pertama, semak sama ada pelayar menyokong 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}

• Fungsi ini menyemak ketersediaan API StorageManager secara berperingkat.
• Memandangkan navigator.storage tidak wujud dalam sesetengah pelayar seperti Safari, adalah penting untuk menyemak kewujudannya dengan selamat menggunakan typeof.

Anggar Penggunaan Storan (estimate())

Selepas memeriksa fungsi dengan supportsStorageManager(), dapatkan penggunaan (usage) dan kuota (quota) daripada 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});

• Fungsi ini sentiasa berfungsi dengan selamat dan mengembalikan null jika pelayar tidak menyokongnya.
• usage dan quota adalah anggaran dan boleh berbeza antara pelayar.

Permintaan Ketekalan Data (persist())

Gunakan persist() untuk meminta ketekalan supaya data penting (cth: cache luar talian) tidak dipadam secara automatik oleh pelayar. Walaubagaimanapun, ia tidak berjaya dalam semua persekitaran.

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

• Jika persist() berjaya, data tidak akan dipadam secara automatik oleh pelayar, kecuali dengan campur tangan manual pengguna. Namun, permintaan boleh ditolak bergantung pada tindakan pengguna atau tetapan pelayar.

Semak Storan Tersedia Sebelum Menyimpan Data

Sahkan ruang yang tersedia sebelum menyimpan data yang besar untuk mengelakkan kegagalan penulisan (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});

• Dengan menyemak storan yang tersedia sebelum menyimpan, anda dapat mengurangkan risiko gangguan penulisan akibat kapasiti tidak mencukupi.

Mengendalikan localStorage Secara Jenis-Selamat dalam TypeScript

localStorage mudah untuk menyimpan data konfigurasi ringan dan maklumat seumpamanya.

Kelas berikut menggunakan generik untuk mencipta pembalut jenis-selamat.

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

• Kelas ini membantu mengurangkan risiko menyimpan atau mendapatkan data dengan jenis yang salah.

Pertimbangan Praktikal dan Amalan Terbaik

• Sentiasa semak sama ada pelayar menyokong StorageManager Memandangkan StorageManager adalah API yang agak baru, sentiasa sahkan kewujudannya sebelum digunakan.

• Perhatikan had storan dan keserasian Nilai yang dipulangkan oleh estimate() berbeza mengikut pelayar dan hanyalah anggaran.

• Reka bentuk dengan API Asynchronous dalam fikiran estimate() dan persist() ialah API asynchronous berasaskan janji (promise). Reka bentuk kod anda agar tidak menghalang antara muka pengguna (UI).

• Pertimbangan Keselamatan Jangan simpan maklumat sensitif seperti token akses dalam localStorage. Pertimbangkan untuk menggunakan kuki HttpOnly atau penyulitan jika boleh.

• Reka Bentuk Penggantian Jika supportsStorageManager() mengembalikan nilai palsu (false), sediakan logik untuk beralih menggunakan hanya localStorage atau IndexedDB.

Ringkasan

Dengan pengesanan ciri menggunakan supportsStorageManager(), anda boleh menyokong semua persekitaran dengan selamat, menyemak penggunaan serta kuota dengan navigator.storage.estimate(), dan meminta ketekalan dengan persist(). Dalam TypeScript, gunakan fungsi pembalut dan definisi jenis untuk menulis kod yang mudah dibaca dan selamat. Aliran asasnya ialah: semak kewujudan, anggarkan, minta ketekalan, dan semak kapasiti sebelum menulis ke storan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video