KV स्टोरेज - वेब का पहला बिल्ट-इन मॉड्यूल

Philip Walton

चेतावनी: KV Storage को मूल रूप से ऑरिजिन ट्रायल के तौर पर लॉन्च किया गया था. मुफ़्त में आज़माने की यह अवधि खत्म हो गई है और केवी स्टोरेज अब उपलब्ध नहीं है.

पिछले दशक में, ब्राउज़र वेंडर और वेब परफ़ॉर्मेंस विशेषज्ञ कहते आ रहे हैं कि localStorage धीमा है और वेब डेवलपर को इसका इस्तेमाल बंद कर देना चाहिए.

सच कहूँ, तो लोग यह कह रहे हैं कि यह ग़लत नहीं है. localStorage एक सिंक्रोनस एपीआई है, जो मुख्य थ्रेड को ब्लॉक करता है. किसी भी समय इसे ऐक्सेस करने पर, आपके पेज को इंटरैक्टिव होने से रोका जा सकता है.

समस्या यह है कि localStorage एपीआई बहुत ही आसान है और localStorage का इकलौता एसिंक्रोनस विकल्प IndexedDB है. इसे आसानी से इस्तेमाल करने या एपीआई के साथ काम करने के लिए जाना जाता है.

इसलिए, डेवलपर के पास यह चुनने का विकल्प रहता है कि उन्हें इस्तेमाल करना मुश्किल है और नहीं. इससे डेवलपर के पास परफ़ॉर्मेंस के लिए खराब और इस्तेमाल में मुश्किल चीज़ों में से किसी एक को चुनने का विकल्प होता है. कुछ ऐसी लाइब्रेरी भी हैं जो localStorage API की सादगी की सुविधा देती हैं. साथ ही, हुड के तहत एसिंक्रोनस स्टोरेज एपीआई का इस्तेमाल करती हैं. इनमें से एक लाइब्रेरी के लिए फ़ाइल साइज़ की लागत आती है. यह आपके परफ़ॉर्मेंस बजट का हिस्सा हो सकती है.

हालांकि, अगर फ़ाइल साइज़ की कीमत चुकाए बिना, localStorage API की आसानी के साथ एसिंक्रोनस स्टोरेज एपीआई की परफ़ॉर्मेंस को पाना मुमकिन हो, तो क्या होगा?

ठीक है, जल्द ही वहां हो सकता है. Chrome एक नई सुविधा के साथ एक्सपेरिमेंट कर रहा है, जिसे बिल्ट-इन मॉड्यूल कहा जाता है. हम पहले एक एसिंक्रोनस की/वैल्यू स्टोरेज मॉड्यूल को भेजने की योजना बना रहे हैं, जिसे KV Storage कहा जाता है.

KV स्टोरेज मॉड्यूल के बारे में जानकारी पाने से पहले, मुझे बिल्ट-इन मॉड्यूल से अपना मतलब समझने को चाहिए.

पहले से मौजूद मॉड्यूल क्या होते हैं?

पहले से मौजूद मॉड्यूल, सामान्य JavaScript मॉड्यूल की तरह ही होते हैं. हालांकि, इन्हें डाउनलोड करने की ज़रूरत नहीं होती, क्योंकि इन्हें ब्राउज़र के साथ भेजा जाता है.

पारंपरिक वेब एपीआई की तरह, पहले से मौजूद मॉड्यूल को भी एक स्टैंडर्ड प्रोसेस से गुज़रना होगा. हर एक की अपनी खासियत होगी, जिसके लिए डिज़ाइन की समीक्षा की ज़रूरत होगी. साथ ही, इसे शिप करने से पहले वेब डेवलपर और दूसरे ब्राउज़र वेंडर, दोनों से अच्छे संकेत मिलेंगे. (Chrome में, पहले से मौजूद मॉड्यूल उसी लॉन्च प्रोसेस का पालन करेंगे जिसका इस्तेमाल हम सभी नए एपीआई को लागू करने और उन्हें भेजने के लिए करते हैं.)

पारंपरिक वेब एपीआई के उलट, पहले से मौजूद मॉड्यूल ग्लोबल दायरे में नहीं आते हैं — वे सिर्फ़ इंपोर्ट के ज़रिए उपलब्ध होते हैं.

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

पहले से मौजूद मॉड्यूल इंपोर्ट करने के लिए, std: प्रीफ़िक्स के बाद, पहले से मौजूद मॉड्यूल का आइडेंटिफ़ायर इस्तेमाल करें. उदाहरण के लिए, इस्तेमाल किए जा सकने वाले ब्राउज़र में, इस कोड के साथ केवी स्टोरेज मॉड्यूल को इंपोर्ट किया जा सकता है (काम न करने वाले ब्राउज़र में केवी स्टोरेज पॉलीफ़िल को इस्तेमाल करने का तरीका जानने के लिए नीचे देखें):

import storage, {StorageArea} from 'std:kv-storage';

KV स्टोरेज मॉड्यूल

KV स्टोरेज मॉड्यूल, localStorage API से मिलता-जुलता है. हालांकि, इसके एपीआई का आकार JavaScript Map की तरह है. getItem(), setItem(), और removeItem() के बजाय, इसमें get(), set(), और delete() हैं. इसमें मैप जैसे ऐसे अन्य तरीके भी हैं जो localStorage के लिए उपलब्ध नहीं हैं, जैसे कि keys(), values(), और entries(). Map की तरह, इसकी कुंजियों का स्ट्रिंग होना ज़रूरी नहीं है. वे किसी भी तरह का स्ट्रक्चर्ड-सीरियलाइज़्ड टाइप हो सकता है.

Map के उलट, केवी स्टोरेज के सभी तरीकों में या तो प्रॉमिस या एक साथ काम करने वाले इटरेटर दिखते हैं (क्योंकि इस मॉड्यूल का मुख्य पॉइंट यह है कि यह localStorage के उलट, सिंक्रोनस नहीं है). पूरे एपीआई के बारे में ज़्यादा जानने के लिए, खास जानकारी देखें.

जैसा कि आपने ऊपर दिए गए कोड के उदाहरण से देखा होगा, KV स्टोरेज मॉड्यूल में एक डिफ़ॉल्ट एक्सपोर्ट storage और एक नाम वाला एक्सपोर्ट StorageArea है.

storage, 'default' नाम की StorageArea क्लास का एक इंस्टेंस है. डेवलपर इसका इस्तेमाल अक्सर अपने ऐप्लिकेशन कोड में करेंगे. StorageArea क्लास उन मामलों के लिए दी जाती है जहां अतिरिक्त आइसोलेशन की ज़रूरत होती है (उदाहरण के लिए, तीसरे पक्ष की ऐसी लाइब्रेरी जो डेटा सेव करती है और डिफ़ॉल्ट storage इंस्टेंस में सेव किए गए डेटा के साथ टकराव से बचना चाहती है). StorageArea का डेटा, kv-storage:${name} नाम के IndexedDB डेटाबेस में सेव होता है. इसमें StorageArea इंस्टेंस का नाम होता है.

यहां दिए गए उदाहरण में बताया गया है कि आपके कोड में KV स्टोरेज मॉड्यूल का इस्तेमाल कैसे किया जाता है:

चेतावनी: KV Storage को मूल रूप से ऑरिजिन ट्रायल के तौर पर लॉन्च किया गया था. मुफ़्त में आज़माने की यह अवधि खत्म हो गई है और केवी स्टोरेज अब उपलब्ध नहीं है.

import storage from 'std:kv-storage';

const main = async () => {
  const oldPreferences = await storage.get('preferences');

  document.querySelector('form').addEventListener('submit', async () => {
    const newPreferences = Object.assign({}, oldPreferences, {
      // Updated preferences go here...
    });

    await storage.set('preferences', newPreferences);
  });
};

main();

ध्यान दें: अगर आपने प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाओं को फ़्लैग करने की सेटिंग चालू की है, तो यह सुविधा Chrome 74 में उपलब्ध है: (chrome://flags/#enable-experimental-web-platform-features).

अगर किसी ब्राउज़र में बिल्ट-इन मॉड्यूल काम नहीं करता है, तो क्या होगा?

अगर आपको ब्राउज़र में नेटिव JavaScript मॉड्यूल इस्तेमाल करने के बारे में जानकारी है, तो शायद आपको यह पता होगा कि यूआरएल के अलावा कुछ भी इंपोर्ट करने से (कम से कम तब तक) गड़बड़ी जनरेट होगी. साथ ही, std:kv-storage मान्य यूआरएल नहीं है.

इससे यह सवाल उठता है: क्या हमें अपने कोड में उसका इस्तेमाल करने से पहले, सभी ब्राउज़र में बिल्ट-इन मॉड्यूल की सुविधा उपलब्ध होने तक इंतज़ार करना होगा? अच्छी बात यह है कि इसका जवाब नहीं है!

फ़िलहाल, बिल्ट-इन मॉड्यूल का इस्तेमाल तब ही किया जा सकता है, जब एक ब्राउज़र भी इन मॉड्यूल के साथ काम करता हो. इसकी वजह है कि, हम मैप इंपोर्ट करने की सुविधा के साथ, प्रयोग कर रहे हैं.

मैप इंपोर्ट करें

मैप इंपोर्ट एक ऐसा तरीका है जिससे डेवलपर, इंपोर्ट आइडेंटिफ़ायर को एक या उससे ज़्यादा वैकल्पिक आइडेंटिफ़ायर के तौर पर उपनाम दे सकते हैं.

यह काफ़ी असरदार है, क्योंकि इससे आपको रनटाइम के दौरान, यह बदलने का तरीका मिल जाता है कि कोई ब्राउज़र आपके पूरे ऐप्लिकेशन में किसी खास इंपोर्ट आइडेंटिफ़ायर का समाधान कैसे करता है.

पहले से मौजूद मॉड्यूल के मामले में, इससे आपको अपने ऐप्लिकेशन कोड में मॉड्यूल की पॉलीफ़िल का रेफ़रंस देने की सुविधा मिलती है. हालांकि, पहले से मौजूद मॉड्यूल की सुविधा देने वाला ब्राउज़र, इसके बजाय उस वर्शन को लोड कर सकता है!

KV स्टोरेज मॉड्यूल की मदद से यह काम करने के लिए, इंपोर्ट किए गए मैप का एलान करने का तरीका यहां बताया गया है:

<!-- The import map is inlined into your page -->
<script type="importmap">
{
  "imports": {
    "/path/to/kv-storage-polyfill.mjs": [
      "std:kv-storage",
      "/path/to/kv-storage-polyfill.mjs"
    ]
  }
}
</script>

<!-- Then any module scripts with import statements use the above map -->
<script type="module">
  import storage from '/path/to/kv-storage-polyfill.mjs';

  // Use `storage` ...
</script>

ऊपर दिए गए कोड की खास बात यह है कि यूआरएल /path/to/kv-storage-polyfill.mjs को दो अलग-अलग संसाधनों पर मैप किया जा रहा है: std:kv-storage और उसके बाद, ओरिजनल यूआरएल /path/to/kv-storage-polyfill.mjs पर.

इसलिए, जब ब्राउज़र को उस यूआरएल (/path/to/kv-storage-polyfill.mjs) से जुड़ा कोई इंपोर्ट स्टेटमेंट मिलता है, तो सबसे पहले वह std:kv-storage को लोड करने की कोशिश करता है. अगर ऐसा नहीं हो पाता है, तो फिर से लोडिंग /path/to/kv-storage-polyfill.mjs हो जाता है.

एक और बात यह है कि इस तकनीक को इंपोर्ट करने के लिए ब्राउज़र को मैप या बिल्ट-इन मॉड्यूल की सुविधा देने की ज़रूरत नहीं है, क्योंकि इंपोर्ट स्टेटमेंट में दिया जाने वाला यूआरएल, पॉलीफ़िल का यूआरएल है. पॉलीफ़िल असल में फ़ॉलबैक नहीं है, यह डिफ़ॉल्ट है. बिल्ट-इन मॉड्यूल एक बेहतर सुविधा है!

उन ब्राउज़र का क्या होगा जिनमें मॉड्यूल को इस्तेमाल करने की सुविधा बिलकुल नहीं है?

अगर आपको इंपोर्ट मैप का इस्तेमाल शर्त के साथ बिल्ट-इन मॉड्यूल को लोड करने के लिए करना है, तो आपको import स्टेटमेंट का इस्तेमाल करना होगा. इसका मतलब यह भी है कि आपको मॉड्यूल स्क्रिप्ट यानी <script type="module"> का इस्तेमाल करना होगा.

फ़िलहाल, 80% से ज़्यादा ब्राउज़र में मॉड्यूल काम करते हैं. वहीं, जिन ब्राउज़र में ये मॉड्यूल काम नहीं करते उनके लिए मॉड्यूल/नोमॉड्यूल तकनीक का इस्तेमाल करके, लेगसी बंडल दिखाया जा सकता है. ध्यान दें कि nomodule बिल्ड जनरेट करते समय, आपको सभी पॉलीफ़िल शामिल करने होंगे. ऐसा इसलिए, क्योंकि आपको पता है कि जिन ब्राउज़र में मॉड्यूल काम नहीं करते उनमें पहले से मौजूद मॉड्यूल काम नहीं करेंगे.

KV स्टोरेज का डेमो

चेतावनी: KV Storage को मूल रूप से ऑरिजिन ट्रायल के तौर पर लॉन्च किया गया था. मुफ़्त में आज़माने की यह अवधि खत्म हो गई है और केवी स्टोरेज अब उपलब्ध नहीं है.

यह बताने के लिए कि पुराने ब्राउज़र के साथ काम करते हुए भी बिल्ट-इन मॉड्यूल का इस्तेमाल किया जा सकता है, हमने एक डेमो तैयार किया है, जिसमें ऊपर बताई गई सभी तकनीकें शामिल हैं और यह आज सभी ब्राउज़र पर चलता है:

• मॉड्यूल, मैप इंपोर्ट करने, और बिल्ट-इन मॉड्यूल के साथ काम करने वाले ब्राउज़र ग़ैर-ज़रूरी कोड लोड नहीं करते.
• ऐसे ब्राउज़र जो मॉड्यूल और इंपोर्ट की सुविधा देते हैं, लेकिन पहले से मौजूद मॉड्यूल पर काम नहीं करते. वे KV स्टोरेज पॉलीफ़िल (ब्राउज़र के मॉड्यूल लोडर से) को लोड करते हैं.
• ऐसे ब्राउज़र जो मॉड्यूल की सुविधा देते हैं, लेकिन मैप को इंपोर्ट करने की सुविधा नहीं देते, वे भी KV स्टोरेज का पॉलीफ़िल (ब्राउज़र के मॉड्यूल लोडर से) लोड करते हैं.
• मॉड्यूल बिलकुल काम नहीं करने वाले ब्राउज़र को लेगसी बंडल (<script nomodule> से लोड किया जाता है) में, केवी स्टोरेज पॉलीफ़िल मिलता है.

यह डेमो, Glitch पर होस्ट किया गया है, ताकि आप इसका सोर्स देख सकें. मेरे पास README में इसे लागू करने की पूरी जानकारी भी है. अगर आपको यह जानना है कि इसे कैसे बनाया गया है, तो बेझिझक इसे देखें.

ध्यान दें: डेमो में Rollup का इस्तेमाल करके, ऐप्लिकेशन कोड और पॉलीफ़िल को बंडल किया जाता है. साथ ही, क्रॉस-ब्राउज़र काम करने के लिए, ज़रूरी अलग-अलग वर्शन जनरेट किए जाते हैं. मुझे webpack की मदद से ऐसा ही एक डेमो बनाना था, लेकिन फ़िलहाल यह किसी मॉड्यूल आउटपुट फ़ॉर्मैट के साथ काम नहीं करता. इसलिए, फ़िलहाल ऐसा करना मुमकिन नहीं है.

मैंने वेबपैक में पहले से मौजूद मॉड्यूल के लिए सहायता जोड़ने के लिए, सुविधा का अनुरोध किया है. अगर आपको यह सुविधा वेबपैक में भी चाहिए, तो इस समस्या में मदद करें.

नेटिव बिल्ट-इन मॉड्यूल को असल में इस्तेमाल करने के लिए, आपको Chrome 74 या इसके बाद के वर्शन में डेमो लोड करना होगा. इसके लिए, प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाओं वाला फ़्लैग चालू होना चाहिए (chrome://flags/#enable-experimental-web-platform-features).

यह पुष्टि की जा सकती है कि पहले से मौजूद मॉड्यूल लोड हो रहा है, क्योंकि आपको DevTools के सोर्स पैनल में पॉलीफ़िल स्क्रिप्ट नहीं दिखेगी. इसके बजाय, आपको बिल्ट-इन मॉड्यूल वर्शन दिखेगा (मज़ेदार जानकारी: असल में, मॉड्यूल के सोर्स कोड की जांच की जा सकती है या इसमें ब्रेकपॉइंट भी डाले जा सकते हैं!):

कृपया हमें सुझाव, शिकायत या राय दें

चेतावनी: KV Storage को मूल रूप से ऑरिजिन ट्रायल के तौर पर लॉन्च किया गया था. मुफ़्त में आज़माने की यह अवधि खत्म हो गई है और केवी स्टोरेज अब उपलब्ध नहीं है.

इस परिचय से आपको इस बात की झलक मिलनी चाहिए कि पहले से मौजूद मॉड्यूल की मदद से क्या-क्या किया जा सकता है. उम्मीद है कि आप इस बात से बहुत उत्साहित हैं! हम चाहते हैं कि डेवलपर, KV स्टोरेज मॉड्यूल (और यहां बताई गई सभी नई सुविधाओं) को आज़माएं और अपने सुझाव, शिकायत या राय दें.

यहां GitHub लिंक दिए गए हैं, जिन पर जाकर इस लेख में बताई गई हर सुविधा के बारे में सुझाव/राय दी जा सकती है या शिकायत की जा सकती है:

• केवी स्टोरेज
• केवी स्टोरेज पॉलीफ़िल
• पहले से मौजूद मॉड्यूल
• Maps की जानकारी इंपोर्ट करें

अगर आपकी साइट फ़िलहाल localStorage का इस्तेमाल कर रही है, तो KV Storage API पर स्विच करके देखें कि यह आपकी सभी ज़रूरतों को पूरा करता है या नहीं. KV स्टोरेज के ऑरिजिन ट्रायल के लिए साइन अप करने पर, इन सुविधाओं को आज ही डिप्लॉय किया जा सकता है. इससे आपके सभी उपयोगकर्ताओं को बेहतर स्टोरेज परफ़ॉर्मेंस का फ़ायदा मिलेगा. साथ ही, Chrome 74+ के उपयोगकर्ताओं को डाउनलोड करने के लिए कोई अतिरिक्त शुल्क नहीं देना होगा.