टाइपस्क्रिप्ट और स्टोरेजमैनेजर
यह लेख टाइपस्क्रिप्ट और स्टोरेजमैनेजर को समझाता है।
हम टाइपस्क्रिप्ट और स्टोरेजमैनेजर को समझाने के लिए व्यावहारिक उदाहरण प्रदान करते हैं।
YouTube Video
टाइपस्क्रिप्ट और स्टोरेजमैनेजर
स्टोरेजमैनेजर क्या है?
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 API की उपलब्धता को चरणों में जांचता है।
- क्योंकि
navigator.storageकुछ ब्राउज़रों जैसे Safari में उपलब्ध नहीं है, इसलिए इसका अस्तित्व सुरक्षित रूप सेtypeofका उपयोग करके जांचना महत्वपूर्ण है।
स्टोरेज उपयोग का अनुमान लगाएं (estimate())
supportsStorageManager() के साथ कार्यक्षमता की जांच करने के बाद, navigator.storage.estimate() से उपयोग (usage) और कोटा (quota) प्राप्त करें।
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 को टाइप-सुरक्षित रूप से संभालना
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 हैं। अपने कोड को इस तरह डिजाइन करें कि UI अवरुद्ध न हो। -
सुरक्षा संबंधी विचार
localStorageमें एक्सेस टोकन जैसी संवेदनशील जानकारी न रखें। यदि संभव हो, तो HttpOnly कुकीज़ या एन्क्रिप्शन का उपयोग करने पर विचार करें। -
फॉलबैक डिज़ाइन यदि
supportsStorageManager()false लौटाता है, तो केवलlocalStorageयाIndexedDBका उपयोग करने के लिए लॉजिक प्रदान करें।
सारांश
supportsStorageManager() का उपयोग करके फीचर डिटेक्शन से, आप सभी वातावरणों को सुरक्षित रूप से सपोर्ट कर सकते हैं, navigator.storage.estimate() से उपयोग और कोटा जांच सकते हैं, और persist() से पर्सिस्टेंस का अनुरोध कर सकते हैं। TypeScript में, कोड को पढ़ने योग्य और सुरक्षित बनाने के लिए रैपर फ़ंक्शन्स और टाइप डेफिनिशन का उपयोग करें। मूल प्रवाह है: अस्तित्व जांचना, अनुमान लगाना, पर्सिस्टेंस का अनुरोध करना, और स्टोरेज में लिखने से पहले क्षमता जांचना।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।