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

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 में सेव करना चाहिए और फ़ेच एपीआई के ज़रिए, खास एचटीटीपी अनुरोधों के हेडर या बॉडी में खास तौर पर आइडेंटिफ़ायर जोड़ना चाहिए.

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

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

इस समस्या को आसानी से ठीक करने के लिए, document.cookieगेटर से एसिंक्रोनस 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 सेटर को भी इसी तरह बदला जा सकता है. ध्यान रखें कि इस बात की गारंटी है कि 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 कॉम्पोनेंट पर जाएं.

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

अन्य संसाधन