TypeScript ו-StorageManager
מאמר זה מסביר את TypeScript ו-StorageManager.
אנו מספקים דוגמאות מעשיות כדי להסביר את TypeScript ו-StorageManager.
YouTube Video
TypeScript ו-StorageManager
מהו StorageManager?
StorageManager הוא API שמאפשר לאפליקציות אינטרנט להעריך כמה אחסון הן משתמשות וכמה מקום פנוי זמין. הוא מספק גם בקשת עמידות (persist()) כדי למנוע מחיקה אוטומטית של נתונים על ידי המשתמש או הדפדפן. דבר זה מאפשר לבדוק אם יש מספיק מקום פנוי או אם הנתונים עלולים להימחק אוטומטית, לדוגמה בעת שמירת כמות גדולה של נתונים ב-IndexedDB לאפליקציות לא מקוונות.
זיהוי תכונות
קודם כל, בדוק אם הדפדפן תומך ב-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}- פונקציה זו בוחנת את זמינות ממשק StorageManager בשלבים.
- מכיוון ש-navigator.storage לא קיים בדפדפנים מסוימים כמו ספארי, חשוב לבדוק את קיומו בצורה בטוחה באמצעות typeof.
הערכת שימוש באחסון (estimate())
לאחר בדיקת הפונקציונליות עם supportsStorageManager(), יש לקבל את השימוש (usage) והמכסה (quota) מ-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});- פונקציה זו תמיד פועלת בצורה בטוחה ומחזירה null אם הדפדפן אינו תומך בה.
- הערכים usage ו-quota הם הערכות ועשויים להשתנות בין דפדפנים שונים.
בקשת עמידות נתונים (persist())
השתמש ב-persist() כדי לבקש עמידות כך שנתונים חשובים (לדוגמה, מטמון לא מקוון) לא ימחקו אוטומטית על ידי הדפדפן. עם זאת, זה לא מצליח בכל הסביבות.
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() מצליח, הנתונים לא יימחקו אוטומטית על ידי הדפדפן אלא אם המשתמש יבחר בכך ידנית. עם זאת, בקשות עלולות להידחות בהתאם לפעולות המשתמש או הגדרות הדפדפן.
בדיקת מקום פנוי באחסון לפני שמירת נתונים
אמת שיש מקום פנוי לפני שמירת נתונים גדולים כדי למנוע כישלון בכתיבה (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});- על ידי בדיקת שטח פנוי לפני שמירה, אתה יכול לצמצם את הסיכון לבעיות כתיבה עקב קיבולת לא מספקת.
התמודדות עם localStorage בצורה בטוחה טיפוסית ב-TypeScript
localStorage נוחה לשמירת נתוני תצורה קלים ומידע דומה.
המחלקה הבאה משתמשת בג׳נריקס ליצירת מעטפת בטוחה-טיפוסית.
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'));- מחלקה זו מסייעת לצמצם את הסיכון לשמירה או שליפת נתונים עם טיפוס שגוי.
שיקולים מעשיים והמלצות עבודה
-
תמיד בדוק אם הדפדפן תומך ב-StorageManager מכיוון ש-StorageManager הוא API חדש יחסית, תמיד יש לוודא את קיומו לפני השימוש.
-
שימו לב למגבלות אחסון ולתאימות הערך שמוחזר מ-estimate() משתנה לפי הדפדפן והוא הערכה בלבד.
-
תכנן את הקוד מתוך מחשבה על API אסינכרוני estimate() ו-persist() הם API אסינכרוני המבוסס על Promise. תכנן את הקוד שלך כך שהוא לא יחסום את ממשק המשתמש.
-
שיקולי אבטחה אל תאחסן מידע רגיש כגון אסימוני גישה (access tokens) ב-localStorage. שקול להשתמש בעוגיות HttpOnly או הצפנה אם ניתן.
-
עיצוב חלופי (Fallback) אם supportsStorageManager() מחזיר false, ספק לוגיקה לעבור לשימוש ב-localStorage או IndexedDB בלבד.
סיכום
באמצעות זיהוי תכונה בעזרת supportsStorageManager(), באפשרותך לתמוך בכל הסביבות בצורה בטוחה, לבדוק שימוש ומכסה עם navigator.storage.estimate() ולבקש עמידות עם persist(). ב-TypeScript, השתמש בפונקציות מעטפת והגדרות טיפוס לכתיבת קוד קריא ובטוח. הזרימה הבסיסית היא: בדוק קיום, בצע הערכה, בקש עמידות, ובדוק קיבולת לפני כתיבה לאחסון.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.