Articles
TypeScript'e Giriş
TypeScript ve StorageManager

TypeScript ve StorageManager

Bu makale TypeScript ve StorageManager'ı açıklar.

TypeScript ve StorageManager'ı açıklamak için pratik örnekler sunuyoruz.

YouTube Video

TypeScript ve StorageManager

StorageManager nedir?

StorageManager, web uygulamalarının ne kadar depolama kullandığını ve ne kadar kapasite kaldığını tahmin etmesine olanak tanıyan bir API'dir. Ayrıca, kullanıcının veya tarayıcının verileri otomatik olarak silmesini önlemek için bir kalıcılık isteği (persist()) sağlar. Bu, yeterli boş alan olup olmadığını veya verilerin otomatik olarak silinip silinmeyeceğini kontrol etmenizi sağlar; örneğin, çevrimdışı uygulamalar için IndexedDB'de büyük miktarlarda veri saklandığında.

Özellik Tespiti

Öncelikle tarayıcının navigator.storage desteği olup olmadığını kontrol edin.

 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}
  • Bu fonksiyon, StorageManager API'nin kullanılabilirliğini aşama aşama kontrol eder.
  • navigator.storage Safari gibi bazı tarayıcılarda bulunmadığından, bunun varlığını typeof ile güvenli bir şekilde kontrol etmek önemlidir.

Depolama Kullanımını Tahmin Etme (estimate())

supportsStorageManager() ile işlevselliği kontrol ettikten sonra, navigator.storage.estimate() ile kullanım (usage) ve kota (quota) bilgilerini alın.

 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});
  • Bu fonksiyon, tarayıcı desteklemiyorsa her zaman güvenli çalışır ve null döndürür.
  • usage ve quota değerleri bir tahmindir ve tarayıcılar arasında değişebilir.

Veri Kalıcılığı Talep Etme (persist())

Önemli verilerin (örneğin, çevrimdışı önbellek) tarayıcı tarafından otomatik olarak silinmemesi için persist() kullanarak kalıcılık isteyebilirsiniz. Ancak, bu her ortamda başarılı olmayabilir.

 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});
  • persist() başarılı olursa, veriler kullanıcı manuel olarak müdahale etmediği sürece tarayıcı tarafından otomatik olarak silinmez. Ancak, istekler kullanıcı eylemlerine veya tarayıcı ayarlarına bağlı olarak reddedilebilir.

Veri Kaydetmeden Önce Kullanılabilir Depolamayı Kontrol Edin

Yazma hatalarını (QuotaExceededError) önlemek için büyük veri kaydetmeden önce kullanılabilir alanı doğrulayın.

 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});
  • Kaydetmeden önce kullanılabilir depolamayı kontrol ederek, yetersiz kapasite nedeniyle oluşabilecek yazma kesintisi riskini azaltabilirsiniz.

TypeScript'te localStorage'ı Tip Güvenliğiyle Kullanmak

localStorage, hafif yapılandırma verilerini ve benzer bilgileri saklamak için oldukça uygundur.

Aşağıdaki sınıf, tip güvenli bir sarmalayıcı oluşturmak için generics kullanır.

 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'));
  • Bu sınıf, yanlış türde veri depolama veya alma riskini azaltmaya yardımcı olur.

Pratik Noktalar ve En İyi Uygulamalar

  • Tarayıcının StorageManager desteği olup olmadığını her zaman kontrol edin StorageManager nispeten yeni bir API olduğu için, kullanmadan önce varlığını mutlaka doğrulayın.

  • Depolama sınırlarına ve uyumluluğa dikkat edin estimate() tarafından döndürülen değer, tarayıcıya göre değişir ve yalnızca bir tahmindir.

  • Asenkron API'ları Akılda Tutacak Şekilde Tasarlayın estimate() ve persist() promise tabanlı asenkron API'lardır. Kodunuzu, kullanıcı arayüzünü (UI) bloke etmeyecek şekilde tasarlayın.

  • Güvenlik Dikkatleri Erişim belirteçleri gibi hassas bilgileri localStorage'da saklamayın. Mümkünse HttpOnly çerezleri veya şifreleme kullanmayı düşünün.

  • Yedek Tasarım supportsStorageManager() false döndürürse, yalnızca localStorage veya IndexedDB kullanacak şekilde bir mantık ekleyin.

Özet

supportsStorageManager() ile özellik tespiti sayesinde, tüm ortamları güvenli bir şekilde destekleyebilir, navigator.storage.estimate() ile kullanım ve kotayı kontrol edebilir ve persist() ile kalıcılık isteğinde bulunabilirsiniz. TypeScript'te okunabilir ve güvenli kod yazmak için sarmalayıcı fonksiyonlar ve tip tanımlamaları kullanın. Temel akış: varlık kontrolü, tahmin, kalıcılık isteği ve depolamaya yazmadan önce kapasite kontrolüdür.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

TypeScript ve IndexedDB