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

Victor Costan
X GitHub

Cookie Store API क्या है?

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

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

जानकारी पढ़ें

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

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

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

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

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

chrome --enable-blink-features=CookieStore

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

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

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

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

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

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

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

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

ऊपर दी गई सभी वजहों से, आधुनिक वेब ऐप्लिकेशन को कुकी और इसके बजाय, एक सेशन आइडेंटिफ़ायर 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 ब्लिंक कॉम्पोनेंट.

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

अन्य संसाधन