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

Victor Costan
X GitHub

Cookie Store API क्या है?

कुकी स्टोर एपीआई, सेवा वर्कर को एचटीटीपी कुकी दिखाता है और document.cookie के लिए असाइनोक्रोनस विकल्प उपलब्ध कराता है. एपीआई की मदद से, ये काम करना आसान हो जाता है:

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

एक्सप्लेनेशंस के बारे में जानकारी

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

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

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

ऑरिजिन ट्रायल की सुविधा चालू करना

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

chrome --enable-blink-features=CookieStore

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

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

आपको शायद कुकी की ज़रूरत न पड़े

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

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

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

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

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

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

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

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

इस समस्या को ठीक करने के लिए, document.cookie गेटर से असाइनोक्रोनस कुकी स्टोर एपीआई पर स्विच करें.

await cookieStore.get('session_id');

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

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

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

// undefined

निगरानी करें, पोल न करें

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

Cookie Store 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 एपीआई को सर्विस वर्कर्स के लिए उपलब्ध नहीं कराया गया है. Cookie Store API, एसिंक्रोनस है. इसलिए, इसे सेवा वर्कर में इस्तेमाल करने की अनुमति है.

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

// 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 Blink कॉम्पोनेंट पर जाएं.

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

अन्य संसाधन