Articles
Pengenalan ke TypeScript
TypeScript dan StorageManager

TypeScript dan StorageManager

Artikel ini menjelaskan tentang TypeScript dan StorageManager.

Kami memberikan contoh praktis untuk menjelaskan TypeScript dan StorageManager.

YouTube Video

TypeScript dan StorageManager

Apa itu StorageManager?

StorageManager adalah API yang memungkinkan aplikasi web memperkirakan berapa banyak penyimpanan yang digunakan dan berapa kapasitas yang tersedia. API ini juga menyediakan permintaan persistensi (persist()) untuk mencegah penghapusan data secara otomatis oleh pengguna atau browser. Ini memungkinkan Anda mengontrol apakah ada cukup ruang kosong atau jika data akan dihapus secara otomatis, misalnya ketika menyimpan data dalam jumlah besar di IndexedDB untuk aplikasi offline.

Deteksi Fitur

Pertama, periksa apakah browser mendukung 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 memeriksa ketersediaan API StorageManager secara bertahap.
  • Karena navigator.storage tidak tersedia di beberapa browser seperti Safari, penting untuk memeriksa keberadaannya dengan aman menggunakan typeof.

Perkiraan Pemakaian Penyimpanan (estimate())

Setelah memeriksa fungsionalitas dengan supportsStorageManager(), dapatkan penggunaan (usage) dan kuota (quota) dari 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 selalu berjalan dengan aman dan mengembalikan null jika browser tidak mendukungnya.
  • usage dan quota adalah perkiraan dan nilainya bisa berbeda antar browser.

Permintaan Persistensi Data (persist())

Gunakan persist() untuk meminta persistensi agar data penting (seperti cache offline) tidak dihapus secara otomatis oleh browser. Namun, ini tidak selalu berhasil di semua lingkungan.

 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() berhasil, data tidak akan dihapus secara otomatis oleh browser, kecuali oleh intervensi manual pengguna. Namun, permintaan dapat ditolak tergantung pada tindakan pengguna atau pengaturan browser.

Periksa Ketersediaan Penyimpanan Sebelum Menyimpan Data

Periksa ruang yang tersedia sebelum menyimpan data besar untuk mencegah 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 memeriksa ketersediaan penyimpanan sebelum menyimpan, Anda dapat mengurangi risiko gangguan penulisan akibat kapasitas yang tidak cukup.

Menangani localStorage Secara Aman Tipe di TypeScript

localStorage nyaman digunakan untuk menyimpan data konfigurasi ringan dan informasi sejenisnya.

Kelas berikut menggunakan generik untuk membuat pembungkus yang aman tipe.

 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 mengurangi risiko penyimpanan atau pengambilan data dengan tipe yang salah.

Pertimbangan Praktis dan Praktik Terbaik

  • Selalu periksa apakah browser mendukung StorageManager Karena StorageManager adalah API yang relatif baru, selalu konfirmasi keberadaannya sebelum digunakan.

  • Perhatikan batasan penyimpanan dan kompatibilitas Nilai yang dikembalikan oleh estimate() bervariasi menurut browser dan hanya berupa perkiraan.

  • Rancang dengan Mempertimbangkan API Asinkron estimate() dan persist() adalah API asinkron berbasis promise. Rancang kode Anda agar tidak memblokir UI.

  • Pertimbangan Keamanan Jangan menyimpan informasi sensitif seperti access token di localStorage. Pertimbangkan menggunakan cookie HttpOnly atau enkripsi jika memungkinkan.

  • Desain Fallback Jika supportsStorageManager() mengembalikan false, sediakan logika untuk beralih menggunakan hanya localStorage atau IndexedDB.

Ringkasan

Dengan deteksi fitur menggunakan supportsStorageManager(), Anda dapat mendukung semua lingkungan dengan aman, memeriksa penggunaan dan kuota menggunakan navigator.storage.estimate(), dan meminta persistensi dengan persist(). Di TypeScript, gunakan fungsi pembungkus dan definisi tipe untuk menulis kode yang mudah dibaca dan aman. Alur dasarnya adalah: periksa keberadaan, lakukan estimasi, minta persistensi, dan periksa kapasitas sebelum menyimpan ke storage.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

TypeScript dan IndexedDB