🌞 🤚🏿 🤤 वेब भंडारण 🕶️ 🖨️ 💃🏼

शुभ दिन, दोस्तों।

मैं आपके लिए पीट लेज द्वारा लेख "वेब के लिए भंडारण" का अनुवाद प्रस्तुत करता हूं ।

एक ब्राउज़र में डेटा संग्रहीत करने के लिए कई प्रौद्योगिकियाँ हैं। इनमे से कौन बेहतर है?

एक इंटरनेट कनेक्शन खराब हो सकता है या कुछ जगहों पर अनुपस्थित भी हो सकता है। इसलिए, ऑफ़लाइन समर्थन प्रगतिशील वेब अनुप्रयोगों की प्रमुख विशेषताओं में से एक है । हाई-स्पीड कनेक्शन के साथ, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए कैशिंग और अन्य तकनीकों का उपयोग करना समझदारी है। फ़ाइलें (HTML, JavaScript, CSS, चित्र आदि) और डेटा (उपयोगकर्ता डेटा, समाचार लेख आदि) को सहेजने के कई तरीके हैं। लेकिन कौन सा समाधान चुनना बेहतर है? और इसके स्थायित्व को कैसे सुनिश्चित करें?

क्या उपयोग करें?

मैं निम्नलिखित सलाह दे सकता हूं:

काम करने और सामग्री प्रदर्शित करने के लिए एप्लिकेशन के लिए आवश्यक नेटवर्क संसाधनों के लिए, कैश संग्रहण API ( सेवा श्रमिकों का हिस्सा ) का उपयोग करें।
अन्य डेटा के लिए, IndexedDB का उपयोग करें ( वादों से लपेट के साथ )।

IndexedDB और Cache API सभी आधुनिक ब्राउज़रों द्वारा समर्थित हैं। वे अतुल्यकालिक हैं, अर्थात् मुख्य थ्रेड (कोड निष्पादन) को ब्लॉक न करें। वे विंडो ऑब्जेक्ट, वेब वर्कर्स और सर्विस वर्कर्स पर उपलब्ध हैं। दूसरे शब्दों में, उनका उपयोग हर जगह किया जा सकता है।

अन्य तंत्रों के बारे में क्या?

ब्राउज़र में अन्य डेटा भंडारण तंत्र भी हैं, लेकिन उनकी कुछ सीमाएँ हैं और प्रदर्शन समस्याएं पैदा कर सकती हैं।

SessionStorage . , , , IndexedDB. , , . 5 ( ), - -.
LocalStorage . 5 ( ), - -.
Cookies . HTTP-, . , -, .
File System API FileWriter API . , , , Chrome.
Native File System API . . .
WebSQL , IndexedDB. . W3C 2010 .
Application Cache , - Cache API. .

?

कम से कम कुछ सौ मेगाबाइट, संभवतः सैकड़ों गीगाबाइट। यह ब्राउज़र पर निर्भर करता है, हालांकि, भंडारण की मात्रा आमतौर पर उपयोगकर्ता के डिवाइस में उपलब्ध मेमोरी की मात्रा पर आधारित होती है।

Chrome आपको 60% डिस्क स्थान का उपयोग करने की अनुमति देता है। आप सीमा (कोटा) निर्धारित करने के लिए StorageManager API का उपयोग कर सकते हैं।
इंटरनेट एक्सप्लोरर 10 और बाद में 250 एमबी तक डेटा स्टोर कर सकता है।
फ़ायरफ़ॉक्स आपको 2 जीबी तक डेटा स्टोर करने की अनुमति देता है। आप सीमा निर्धारित करने के लिए StorageManager API का उपयोग कर सकते हैं।
सफारी (डेस्कटॉप और मोबाइल दोनों) आपको 1 जीबी तक डेटा स्टोर करने की अनुमति देता है। सीमा तक पहुंचने पर, सफारी उपयोगकर्ता को 200 एमबी से कोटा बढ़ाने की अनुमति मांगता है।

अतीत में, जब भंडारण सीमा समाप्त हो गई थी, तो ब्राउज़रों ने स्मृति की मात्रा बढ़ाने के लिए उपयोगकर्ता की अनुमति का अनुरोध किया था। उदाहरण के लिए, जब 50 एमबी की सीमा समाप्त हो जाती है, तो ब्राउज़र ने उपयोगकर्ता से कोटा 100 एमबी तक बढ़ाने की अनुमति मांगी, और इसलिए प्रत्येक 50 एमबी।

आज, अधिकांश ब्राउज़र स्वचालित रूप से कोटा के भीतर भंडारण की मात्रा में वृद्धि नहीं करते हैं। अपवाद सफारी है, जो 750 एमबी तक पहुंचने पर, उपयोगकर्ता से 1.1 जीबी की सीमा बढ़ाने की अनुमति मांगता है। कोटा को पार करने का प्रयास विफलता में समाप्त हो जाएगा।

सीमा के संतुलन की जांच कैसे करें?

इसके लिए, कई ब्राउज़रों में, आप StorageManager API का उपयोग कर सकते हैं। यह IndexedDB और Cache API द्वारा उपयोग किए जाने वाले बाइट्स की कुल संख्या दिखाता है, जिससे आप शेष की गणना कर सकते हैं।

if(navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate()
  // quota.usage ->   
  // quota.quota ->   
  const percentageUsed = (quota.usage / quota.quota) * 100
  console.log(`  ${ percentageUsed}% `)
  const remaining = quota.quota - quota.usage
  console.log(`   ${remaining} `)
}

कृपया ध्यान दें कि StorageManager API अभी तक सभी ब्राउज़रों द्वारा समर्थित नहीं है। हालाँकि, भले ही यह समर्थित हो, एक त्रुटि हैंडलर प्रदान किया जाना चाहिए। कुछ मामलों में, कोटा वास्तविक भंडारण क्षमता से अधिक हो सकता है।

निरीक्षण

विकास के दौरान, आप विभिन्न रिपॉजिटरी की स्थिति को ट्रैक करने और उन्हें साफ करने के लिए ब्राउज़र टूल्स का उपयोग कर सकते हैं।

इस लेख पर काम करते समय, मैंने भंडारण क्षमताओं के त्वरित परीक्षण के लिए यह सरल उपकरण लिखा था । यह विभिन्न डेटा भंडारण तंत्रों के साथ प्रयोग करने का एक त्वरित और आसान तरीका है और देखें कि कोटा पार होने पर क्या होता है।

त्रुटियों को कैसे संभालें?

हद हो जाने पर क्या करें? बेशक, त्रुटियों को संभालो, यह QuotaExceededError या कुछ और हो। फिर, अपने आवेदन के डिजाइन के आधार पर, आपको उस तरीके को चुनना चाहिए जो वे संसाधित हैं। उदाहरण के लिए, आप अपने आकार के आधार पर पुरानी सामग्री या डेटा को हटा सकते हैं, या उपयोगकर्ता को यह तय करने की क्षमता प्रदान कर सकते हैं कि क्या हटाना है।

IndexedDB और Cache API एक कोटा से अधिक होने पर एक Dharmrror QuotaExceededError फेंकते हैं।

IndexedDB

जब सीमा समाप्त हो जाती है, तो IndexedDB को डेटा लिखने का प्रयास विफल हो जाएगा। ऑनबोर्ट () विधि को एक तर्क के रूप में घटना के साथ बुलाया जाएगा। ईवेंट में त्रुटि गुण में DOMException होगी। त्रुटि नाम की जाँच करने पर एक QuotaExceededError वापस आ जाएगी।

const transaction = idb.transaction(['entries'], 'readwrite')
transaction.onabort = function(event) {
    const error = event.target.error // DOMException
    if(error.name === 'QuotaExceededError') {
        // ...
    }
}

कैश एपीआई

कैश API में डेटा लिखने का प्रयास जब सीमा पूरी हो जाती है, तो उसे कोटा से बाहर कर दिया जाएगा।

try {
    const cache = await caches.open('my-cache')
    await cache.add(new Request('/sample1.jpg'))
} catch (error) {
    if(error.name = 'QuotaExceededError') {
        // ...
    }
}

स्टोरेज क्लीनअप कैसे काम करता है?

वेब रिपॉजिटरी दो श्रेणियों "स्टैंड-अलोन" और "प्रबंधित" में आते हैं। स्टैंड-अलोन का अर्थ है कि उपयोगकर्ता के हस्तक्षेप के बिना ब्राउज़र द्वारा भंडार को साफ किया जा सकता है, हालांकि यह लंबे समय तक उपयोग के लिए कम अनुकूलनीय है, साथ ही साथ महत्वपूर्ण डेटा की उपस्थिति में भी। पूर्ण होने पर प्रबंधित वाल्ट अपने आप साफ नहीं होते हैं। उपयोगकर्ता को मैन्युअल रूप से ऐसे स्टोरेज (ब्राउज़र सेटिंग्स के माध्यम से) को साफ़ करना होगा।

डिफ़ॉल्ट रूप से, वेब स्टोरेज (इंडेक्सडीडीबी, कैश एपीआई इत्यादि) को स्टैंड-अलोन के रूप में वर्गीकृत किया जाता है, जिसका अर्थ है कि यदि मैन्युअल नियंत्रण स्थापित नहीं है , तो ब्राउज़र कुछ शर्तों के तहत भंडारण को स्वतंत्र रूप से खाली कर सकता है, उदाहरण के लिए, जब भरना।

भंडारण की सफाई के लिए शर्तें इस प्रकार हैं:

जब स्टोरेज भर जाता है, तब तक कम से कम रिक्वेस्ट (सबसे पुराना यूज टाइम) से शुरू होकर, जब तक ओवरफ्लो की समस्या हल नहीं हो जाती, तब तक क्रोम डेटा डिलीट कर देता है।
IE 10+ भंडारण को साफ नहीं करता है, लेकिन डेटा लिखने की क्षमता को अवरुद्ध करता है।
फ़ायरफ़ॉक्स क्रोम की तरह ही काम करता है।
सफारी ने पहले तिजोरी को खाली नहीं किया था, लेकिन हाल ही में सात दिन की डेटा प्रतिधारण अवधि जोड़ी गई।

MacOS पर iOS और iPad 13.4, Safari 13.1 के साथ शुरू होने पर, सात-दिवसीय डेटा अवधारण अवधि है। इसका मतलब है कि यदि उपयोगकर्ता सात दिनों के भीतर डेटा तक नहीं पहुंचता है, तो उन्हें हटा दिया जाएगा। यह नीति होम स्क्रीन पर जोड़े गए एप्लिकेशन पर लागू नहीं होती है।

बोनस: इंडेक्सेड डीबीई पर वादा लपेटें

IndexedDB एक निम्न-स्तरीय API है जिसे उपयोग करने से पहले कुछ कॉन्फ़िगरेशन की आवश्यकता होती है, जो कि सरल डेटा को संग्रहीत करने की आवश्यकता होने पर अनावश्यक हो सकता है। अधिकांश आधुनिक वादा आधारित एपीआई के विपरीत, यह घटना आधारित है। आईडीबी जैसे वादों का एक आवरण, इस भंडार की कुछ शक्तिशाली विशेषताओं को छुपाता है, लेकिन, इससे भी महत्वपूर्ण बात यह है कि यह अपने जटिल आंतरिक तंत्र (लेनदेन, संस्करण) को भी छुपाता है।

निष्कर्ष

सीमित भंडारण के समय और सीमा बढ़ाने के लिए उपयोगकर्ता अनुमति अनुरोध गुमनामी में डूब गए हैं। साइटें उन सभी संसाधनों और डेटा को प्रभावी ढंग से संग्रहीत कर सकती हैं जो उन्हें काम करने की आवश्यकता है। StorageManager API का उपयोग करके, आप यह निर्धारित कर सकते हैं कि मेमोरी कितनी उपयोग की गई है और कितनी शेष है। और स्टोरेज को मैनुअल कंट्रोल मोड में डालकर आप डेटा को डिलीट होने से बचा सकते हैं।

ध्यान दें प्रति:

यहां आप देख सकते हैं कि आईडीबी का उपयोग करके नोट्स के लिए एक आवेदन कैसे लिखना है।
यहां आप देख सकते हैं कि सेवा कार्यकर्ता कैसे काम करते हैं।

आपके समय के लिए शुक्रिया। मुझे आशा है कि यह अच्छी तरह से खर्च किया गया था।

वेब भंडारण