एचटीटीपी कुकी का एसिंक्रोनस ऐक्सेस

विक्टर कोस्टन
Twitter GitHub

कुकी स्टोर API क्या है?

Cookie Store API, एचटीटीपी कुकी को सर्विस वर्कर को दिखाता है और document.cookie का एसिंक्रोनस विकल्प देता है. एपीआई की मदद से ये काम आसानी से किए जा सकते हैं:

  • एसिंक्रोनस रूप से कुकी ऐक्सेस करके, मुख्य थ्रेड पर जैंक से बचें.
  • कुकी के लिए पोलिंग से बचें, क्योंकि कुकी में हुए बदलावों की निगरानी की जा सकती है.
  • सर्विस वर्कर की कुकी ऐक्सेस करना.

जानकारी देने वाला लेख पढ़ें

मौजूदा स्थिति

चरण स्थिति
1. जानकारी बनाएं पूरा हुआ
2. स्पेसिफ़िकेशन का शुरुआती ड्राफ़्ट बनाएं पूरा हुआ
**3. लोगों से सुझाव/राय पाना और खास जानकारी को दोहराना** **प्रोसेस जारी है**
4. ऑरिजिन ट्रायल रोका गया है
5. लॉन्च करें Not started

मैं एसिंक्रोनस कुकी स्टोर का इस्तेमाल कैसे करूं?

ऑरिजिन ट्रायल को चालू करें

स्थानीय तौर पर इसे आज़माने के लिए, कमांड लाइन पर एपीआई को चालू किया जा सकता है:

chrome --enable-blink-features=CookieStore

इस फ़्लैग को कमांड लाइन पर पास करने से, मौजूदा सेशन के लिए एपीआई, दुनिया भर में Chrome में चालू हो जाता है.

इसके अलावा, chrome://flags में #enable-experimental-web-platform-features फ़्लैग को चालू किया जा सकता है.

आपको (शायद) कुकी की ज़रूरत नहीं है

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

कुकी से बचने की मुख्य वजहें ये हैं:

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

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

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

ऊपर बताई गई सभी वजहों से, मॉडर्न वेब ऐप्लिकेशन को कुकी से बचना चाहिए. इसके बजाय, उन्हें IndexedDB में एक सेशन आइडेंटिफ़ायर स्टोर करना चाहिए. साथ ही, fetch एपीआई के ज़रिए, खास एचटीटीपी अनुरोधों के हेडर या मुख्य हिस्से में, आइडेंटिफ़ायर को साफ़ तौर पर जोड़ना चाहिए.

इसका मतलब है कि अब भी यह लेख पढ़ा जा रहा है, क्योंकि आपके पास कुकी इस्तेमाल करने की सही वजह है...

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

इस समस्या को आसानी से ठीक करने के लिए, document.cookie getter से एसिंक्रोनस Cookie Store API पर स्विच करें.

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

document.cookie सेटर को इसी तरह से बदला जा सकता है. ध्यान रखें कि इस बात की गारंटी है कि बदलाव सिर्फ़ तब लागू होगा, जब Promise cookieStore.set से वापस हो जाएगा.

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

निरीक्षण करें, मतदान न करें

JavaScript से कुकी ऐक्सेस करने वाला एक लोकप्रिय ऐप्लिकेशन, यह पता लगा रहा है कि उपयोगकर्ता कब लॉग आउट करता है और यूज़र इंटरफ़ेस (यूआई) अपडेट करता है. फ़िलहाल, ऐसा document.cookie पोल के ज़रिए किया जाता है. इसमें जैंक के बारे में जानकारी दी जाती है और इससे बैटरी लाइफ़ पर बुरा असर पड़ता है.

कुकी स्टोर API, कुकी में हुए बदलावों को देखने का एक वैकल्पिक तरीका उपलब्ध कराता है. इसके लिए, पोल की ज़रूरत नहीं होती.

cookieStore.addEventListener('change', event => {
  for (const cookie of event.changed) {
    if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
  }
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') sessionCookieChanged(null);
  }
});

वेलकम सर्विस वर्कर

सिंक्रोनस डिज़ाइन की वजह से, document.cookie एपीआई सर्विस वर्कर को उपलब्ध नहीं कराया गया. कुकी स्टोर एपीआई एसिंक्रोनस होता है. इसलिए, सर्विस वर्कर में इसका इस्तेमाल किया जा सकता है.

कुकी के साथ इंटरैक्ट करना, दस्तावेज़ के कॉन्टेक्स्ट और सर्विस वर्कर में एक ही तरह से काम करता है.

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

हालांकि, कुकी में हुए बदलावों को देखने का तरीका सर्विस वर्कर में थोड़ा अलग होता है. सर्विस वर्कर को जगाना काफ़ी महंगा हो सकता है. इसलिए, हमें कुकी में हुए उन बदलावों के बारे में साफ़ तौर पर बताना होगा जिनमें वर्कर की दिलचस्पी है.

नीचे दिए गए उदाहरण में, उपयोगकर्ता डेटा को कैश करने के लिए IndexedDB का इस्तेमाल करने वाला ऐप्लिकेशन, सेशन कुकी में हुए बदलावों को मॉनिटर करता है. साथ ही, उपयोगकर्ता के लॉग ऑफ़ करने पर, कैश मेमोरी में सेव किए गए डेटा को मिटा देता है.

// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
  event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});

// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      indexedDB.deleteDatabase('user_cache');
      break;
    }
  }
});

सबसे सही तरीके

जल्द आने वाली है.

सुझाव/राय दें या शिकायत करें

इस एपीआई को आज़माने के बाद, कृपया हमें अपने अनुभव के बारे में बताएं! कृपया एपीआई आकार के बारे में सुझाव, शिकायत या राय खास जानकारी को स्टोर करने की जगह को भेजें. साथ ही, Blink>Storage>CookiesAPI ब्लिंक कॉम्पोनेंट को लागू करने से जुड़ी गड़बड़ियों की शिकायत करें.

हम खास तौर पर, जानकारी में दिए गए उदाहरणों के अलावा, परफ़ॉर्मेंस के मेज़रमेंट और इस्तेमाल के अन्य उदाहरणों के बारे में जानना चाहते हैं.

अन्य संसाधन