ब्राउज़र वेंडर और वेब परफ़ॉर्मेंस के विशेषज्ञ, पिछले एक दशक से यह कह रहे हैं कि localStorage धीमा है और वेब डेवलपर को इसका इस्तेमाल बंद कर देना चाहिए.
सच कहूं, तो ऐसा कहने वाले लोग गलत नहीं हैं. localStorage एक सिंक्रोनस एपीआई है, जो मुख्य थ्रेड को ब्लॉक करता है. इसे ऐक्सेस करने पर, आपके पेज के इंटरैक्टिव होने की संभावना कम हो जाती है.
समस्या यह है कि localStorage एपीआई का इस्तेमाल करना बहुत आसान है. साथ ही, localStorage के लिए, IndexedDB ही एक ऐसा एपीआई है जो एसिंक्रोनस तरीके से काम करता है. IndexedDB को इस्तेमाल करना आसान नहीं है और यह एपीआई, उपयोगकर्ताओं को पसंद नहीं आता.
इसलिए, डेवलपर के पास इस्तेमाल करने में मुश्किल और परफ़ॉर्मेंस के लिहाज़ से खराब विकल्पों में से किसी एक को चुनने का विकल्प होता है. हालांकि, ऐसी लाइब्रेरी भी हैं जो localStorage एपीआई की तरह ही आसानी से इस्तेमाल की जा सकती हैं. हालांकि, ये लाइब्रेरी असाइनोक्रोनस स्टोरेज एपीआई का इस्तेमाल करती हैं. इन लाइब्रेरी में से किसी एक को अपने ऐप्लिकेशन में शामिल करने पर, फ़ाइल के साइज़ की लागत होती है. साथ ही, यह आपके परफ़ॉर्मेंस बजट को भी कम कर सकती है.
हालांकि, अगर फ़ाइल के साइज़ के लिए पैसे चुकाए बिना, localStorage एपीआई की आसानी के साथ, असाइनोक्रोनस स्टोरेज एपीआई की परफ़ॉर्मेंस मिल सकती है, तो क्या होगा?
जल्द ही ऐसा हो सकता है. Chrome, बिल्ट-इन मॉड्यूल नाम की एक नई सुविधा के साथ प्रयोग कर रहा है. हम सबसे पहले, KV स्टोरेज नाम का एक असाइनोक्रोनस पासकोड/वैल्यू स्टोरेज मॉड्यूल लॉन्च करने जा रहे हैं.
हालांकि, KV स्टोरेज मॉड्यूल के बारे में बताने से पहले, मुझे यह बताना होगा कि पहले से मौजूद मॉड्यूल से मेरा क्या मतलब है.
पहले से मौजूद मॉड्यूल क्या होते हैं?
पहले से मौजूद मॉड्यूल, सामान्य JavaScript मॉड्यूल की तरह ही होते हैं. हालांकि, इन्हें ब्राउज़र के साथ शिप किया जाता है, इसलिए इन्हें डाउनलोड करने की ज़रूरत नहीं होती.
वेब के पारंपरिक एपीआई की तरह, पहले से मौजूद मॉड्यूल को भी स्टैंडर्ड बनाने की प्रोसेस से गुज़रना होगा. हर मॉड्यूल की अपनी खास बातें होंगी. इन मॉड्यूल को शिप करने से पहले, डिज़ाइन की समीक्षा की ज़रूरत होगी. साथ ही, वेब डेवलपर और दूसरे ब्राउज़र वेंडर, दोनों से इन मॉड्यूल के लिए सहायता पाने की ज़रूरत होगी. (Chrome में, पहले से मौजूद मॉड्यूल उसी लॉन्च प्रोसेस का पालन करेंगे जिसका इस्तेमाल हम सभी नए एपीआई को लागू करने और शिप करने के लिए करते हैं.)
सामान्य वेब एपीआई के उलट, पहले से मौजूद मॉड्यूल ग्लोबल स्कोप में नहीं दिखते. ये सिर्फ़ इंपोर्ट के ज़रिए उपलब्ध होते हैं.
पहले से मौजूद मॉड्यूल को दुनिया भर में एक्सपोज़ नहीं करने के कई फ़ायदे हैं: इनसे किसी नए JavaScript रनटाइम कॉन्टेक्स्ट (जैसे, नया टैब, वर्कर्स या सेवा वर्कर्स) को शुरू करने में कोई अतिरिक्त मेमोरी या सीपीयू का इस्तेमाल नहीं होगा. साथ ही, जब तक इन्हें इंपोर्ट नहीं किया जाता, तब तक ये किसी भी मेमोरी या सीपीयू का इस्तेमाल नहीं करेंगे. इसके अलावा, इनसे आपके कोड में तय किए गए अन्य वैरिएबल के नामों के मेल खाने का खतरा भी नहीं होता.
किसी बिल्ट-इन मॉड्यूल को इंपोर्ट करने के लिए, प्रीफ़िक्स std: का इस्तेमाल करें. इसके बाद, बिल्ट-इन मॉड्यूल का आइडेंटिफ़ायर डालें. उदाहरण के लिए, काम करने वाले ब्राउज़र में, KV स्टोरेज मॉड्यूल को इस कोड की मदद से इंपोर्ट किया जा सकता है. काम न करने वाले ब्राउज़र में KV स्टोरेज polyfill का इस्तेमाल करने का तरीका जानने के लिए यहां देखें:
import storage, {StorageArea} from 'std:kv-storage';
KV स्टोरेज मॉड्यूल
KV स्टोरेज मॉड्यूल, localStorage एपीआई की तरह ही आसान है. हालांकि, इसका एपीआई JavaScript Map के ज़्यादा करीब है.
इसमें getItem(),
setItem(),
और removeItem() के बजाय,
get(),
set(), और
delete() का इस्तेमाल किया गया है.
इसमें मैप जैसे अन्य तरीके भी हैं, जो localStorage के लिए उपलब्ध नहीं हैं. जैसे,
keys(),
values(), और
entries(). साथ ही, Map की तरह ही, इसकी कुंजियों के लिए स्ट्रिंग का इस्तेमाल करना ज़रूरी नहीं है. ये किसी भी तरह के स्ट्रक्चर्ड-सीरियलाइज़ किए जा सकने वाले टाइप हो सकते हैं.
Map के उलट, सभी KV स्टोरेज के तरीके, वाद या ऐसाइन किए गए आइटम के लिए एक साथ काम न करने वाले फ़ंक्शन में से कोई एक दिखाते हैं. ऐसा इसलिए है, क्योंकि इस मॉड्यूल का मुख्य फ़ंक्शन यह है कि यह localStorage के उलट सिंक्रोनस नहीं है. एपीआई के बारे में पूरी जानकारी के लिए, स्पेसिफ़िकेशन देखें.
जैसा कि आपने ऊपर दिए गए कोड के उदाहरण से देखा होगा, KV स्टोरेज मॉड्यूल में एक डिफ़ॉल्ट एक्सपोर्ट storage और एक नाम वाला एक्सपोर्ट StorageArea है.
storage, StorageArea क्लास का एक इंस्टेंस है, जिसका नाम 'default' है.
डेवलपर अपने ऐप्लिकेशन कोड में अक्सर इसका इस्तेमाल करते हैं. StorageArea क्लास उन मामलों के लिए उपलब्ध कराई गई है जहां ज़्यादा अलगाव की ज़रूरत होती है. उदाहरण के लिए, तीसरे पक्ष की ऐसी लाइब्रेरी जो डेटा सेव करती है और डिफ़ॉल्ट storage इंस्टेंस के ज़रिए सेव किए गए डेटा के साथ टकराव से बचना चाहती है. StorageArea डेटा को kv-storage:${name} नाम वाले IndexedDB डेटाबेस में सेव किया जाता है. यहां नाम, StorageArea इंस्टेंस का नाम होता है.
अपने कोड में KV स्टोरेज मॉड्यूल का इस्तेमाल करने का उदाहरण यहां दिया गया है:
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();
अगर कोई ब्राउज़र, पहले से मौजूद मॉड्यूल के साथ काम नहीं करता है, तो क्या होगा?
अगर आपको ब्राउज़र में नेटिव JavaScript मॉड्यूल इस्तेमाल करने के बारे में पता है, तो आपको पता होगा कि कम से कम अब तक, यूआरएल के अलावा किसी और चीज़ को इंपोर्ट करने पर गड़बड़ी का मैसेज जनरेट होगा. साथ ही, std:kv-storage एक मान्य यूआरएल नहीं है.
इससे यह सवाल उठता है: क्या हमें अपने कोड में इनका इस्तेमाल करने से पहले, तब तक इंतज़ार करना होगा, जब तक सभी ब्राउज़र में पहले से मौजूद मॉड्यूल काम नहीं करने लगते? अच्छी बात यह है कि ऐसा नहीं है!
अगर कोई एक ब्राउज़र इन मॉड्यूल के साथ काम करता है, तो इनका इस्तेमाल किया जा सकता है. ऐसा, इंपोर्ट मैप नाम की एक ऐसी सुविधा की मदद से किया जा सकता है जिस पर हम प्रयोग कर रहे हैं.
मैप इंपोर्ट करना
इंपोर्ट मैप एक ऐसा तरीका है जिसकी मदद से डेवलपर, इंपोर्ट आइडेंटिफ़ायर को एक या उससे ज़्यादा वैकल्पिक आइडेंटिफ़ायर के नाम से बदल सकते हैं.
यह सुविधा काफ़ी असरदार है, क्योंकि इससे आपको यह तय करने का विकल्प मिलता है कि ब्राउज़र आपके पूरे ऐप्लिकेशन में किसी खास इंपोर्ट आइडेंटिफ़ायर को कैसे हल करता है.
पहले से मौजूद मॉड्यूल के मामले में, इससे आपको अपने ऐप्लिकेशन कोड में मॉड्यूल के polyfill का रेफ़रंस देने की सुविधा मिलती है. हालांकि, पहले से मौजूद मॉड्यूल के साथ काम करने वाला ब्राउज़र, इसके बजाय उस वर्शन को लोड कर सकता है!
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% से ज़्यादा ब्राउज़र, मॉड्यूल के साथ काम करते हैं. जिन ब्राउज़र पर मॉड्यूल काम नहीं करते उनके लिए, लेगसी बंडल दिखाने के लिए module/nomodule तकनीक का इस्तेमाल किया जा सकता है. ध्यान दें कि nomodule बिल्ड जनरेट करते समय, आपको सभी पॉलीफ़िल शामिल करने होंगे. ऐसा इसलिए, क्योंकि आपको पता है कि जिन ब्राउज़र पर मॉड्यूल काम नहीं करते वे बिल्ट-इन मॉड्यूल भी काम नहीं करेंगे.
KV स्टोरेज का डेमो
हमने एक डेमो बनाया है. इससे यह पता चलता है कि पुराने ब्राउज़र के साथ काम करते हुए, पहले से मौजूद मॉड्यूल का इस्तेमाल किया जा सकता है. इस डेमो में, ऊपर बताई गई सभी तकनीकें शामिल हैं. यह डेमो, आज के सभी ब्राउज़र में काम करता है:
- मॉड्यूल, इंपोर्ट किए गए मैप, और पहले से मौजूद मॉड्यूल के साथ काम करने वाले ब्राउज़र, ज़रूरत के मुताबिक कोड ही लोड करते हैं.
- ऐसे ब्राउज़र जो मॉड्यूल और इंपोर्ट मैप के साथ काम करते हैं, लेकिन इनमें पहले से मौजूद मॉड्यूल काम नहीं करते. ये ब्राउज़र, ब्राउज़र के मॉड्यूल लोडर की मदद से KV स्टोरेज पॉलीफ़िल लोड करते हैं.
- जो ब्राउज़र मॉड्यूल के साथ काम करते हैं, लेकिन इंपोर्ट मैप के साथ काम नहीं करते वे भी ब्राउज़र के मॉड्यूल लोडर के ज़रिए, KV स्टोरेज पॉलीफ़िल लोड करते हैं.
- जिन ब्राउज़र में मॉड्यूल काम नहीं करते उन्हें अपने लेगसी बंडल में KV Storage polyfill मिलता है. यह
<script nomodule>के ज़रिए लोड होता है.
डेमो को Glitch पर होस्ट किया गया है, ताकि आप इसका सोर्स देख सकें. मैंने README में, इसे लागू करने के बारे में पूरी जानकारी दी है. अगर आपको यह जानना है कि यह कैसे बनाया गया है, तो इसे देखें.
नेटिव बिल्ट-इन मॉड्यूल को काम करते हुए देखने के लिए, आपको Chrome 74 या इसके बाद के वर्शन में डेमो लोड करना होगा. साथ ही, वेब प्लैटफ़ॉर्म की नई सुविधाओं के फ़्लैग को चालू करना होगा (chrome://flags/#enable-experimental-web-platform-features).
यह पुष्टि की जा सकती है कि पहले से मौजूद मॉड्यूल लोड हो रहा है, क्योंकि आपको DevTools के सोर्स पैनल में polyfill स्क्रिप्ट नहीं दिखेगी. इसके बजाय, आपको पहले से मौजूद मॉड्यूल का वर्शन दिखेगा. मज़ेदार बात यह है कि मॉड्यूल के सोर्स कोड की जांच की जा सकती है या उसमें ब्रेकपॉइंट भी डाले जा सकते हैं!
कृपया हमें सुझाव, राय दें या शिकायत करें
इस जानकारी से आपको यह पता चल गया होगा कि पहले से मौजूद मॉड्यूल की मदद से क्या-क्या किया जा सकता है. हमें उम्मीद है कि आपको यह सुविधा पसंद आएगी! हम चाहते हैं कि डेवलपर, KV स्टोरेज मॉड्यूल के साथ-साथ यहां बताई गई सभी नई सुविधाओं को आज़माएं और हमें सुझाव/राय दें.
यहां GitHub के लिंक दिए गए हैं. इन पर जाकर, इस लेख में बताई गई हर सुविधा के बारे में हमें सुझाव/राय दें या शिकायत करें:
अगर आपकी साइट फ़िलहाल localStorage का इस्तेमाल करती है, तो आपको KV Storage API पर स्विच करके यह देखना चाहिए कि यह आपकी सभी ज़रूरतों को पूरा करता है या नहीं. अगर आपने KV Storage के ऑरिजिन ट्रायल के लिए साइन अप किया है, तो इन सुविधाओं को आज ही डिप्लॉय किया जा सकता है. आपके सभी उपयोगकर्ताओं को स्टोरेज की बेहतर परफ़ॉर्मेंस का फ़ायदा मिलेगा. साथ ही, Chrome 74 और उसके बाद के वर्शन का इस्तेमाल करने वाले लोगों को डाउनलोड करने के लिए कोई अतिरिक्त शुल्क नहीं देना होगा.