जावास्क्रिप्ट और कुकीज़

Articles

यह लेख जावास्क्रिप्ट और कुकीज़ को समझाता है।

हम हर चीज़ को धीरे-धीरे, कुकीज़ की बुनियादी बातों, पढ़ने और लिखने, सुरक्षा, और व्यावहारिक उदाहरणों समेत, विस्तार से समझाएंगे।

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

जावास्क्रिप्ट और कुकीज़

कुकी का मतलब है उपयोगकर्ता के ब्राउज़र में संग्रहित छोटे-छोटे डेटा के टुकड़े। ये मुख्य रूप से निम्नलिखित उद्देश्यों के लिए उपयोग किए जाते हैं:।

उपयोगकर्ता प्रमाणीकरण (लॉगिन स्थिति बनाए रखना)
उपयोगकर्ता सेटिंग्स को सहेजना (भाषा, थीम आदि)
ट्रैकिंग (ब्राउज़िंग इतिहास आदि)

जावास्क्रिप्ट में, आप document.cookie का उपयोग करके कुकीज़ पढ़ और लिख सकते हैं।

कुकीज़ बनाना (लिखना)

कुकीज़ निम्नलिखित सिंटैक्स के साथ बनाई जाती हैं:।

1document.cookie = "username=JohnDoe";

यह कोड ब्राउज़र में "username=JohnDoe" नामक एक कुकी सहेजता है।

समाप्ति तिथि वाली कुकीज़ बनाना

कुकीज़ के लिए एक समाप्ति तिथि निर्धारित की जा सकती है। अगर समाप्ति तिथि तय नहीं की जाती है, तो इसे सेशन कुकी के रूप में रखा जाता है और ब्राउज़र बंद होने पर मिटा दिया जाता है।

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

expires एट्रिब्यूट कुकी की समाप्ति तिथि UTC प्रारूप में बताता है।
path एट्रिब्यूट बताता है कि कुकी कहाँ भेजी जाएगी। / का मतलब है पूरी साइट।
यदि आप SameSite=None निर्दिष्ट करते हैं, तो Cookie को क्रॉस-साइट अनुरोधों के साथ भी भेजा जाएगा। हालाँकि, इस स्थिति में, आपको हमेशा Secure विशेषता शामिल करनी चाहिए।
Secure निर्दिष्ट करने से Cookie केवल HTTPS संचार तक सीमित रहता है, जिससे सुरक्षा बढ़ती है।
document.cookie का संदर्भ लेकर, आप वर्तमान पृष्ठ पर उपलब्ध सभी Cookie को एक स्ट्रिंग के रूप में प्राप्त कर सकते हैं।
console.log का उपयोग करके, आप ब्राउज़र में सेट वास्तविक Cookie मान और पुनः प्राप्त किए जा सकने वाले मानों के बीच अंतर देख सकते हैं।

कुकीज़ प्राप्त करना (पढ़ना)

आप document.cookie के साथ सभी कुकीज़ को स्ट्रिंग के रूप में प्राप्त कर सकते हैं।

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

document.cookie का रिटर्न मान एक एकल स्ट्रिंग होता है जिसमें सभी Cookie 'key=value;' प्रारूप में जोड़े जाते हैं।
इस स्ट्रिंग को पार्स करने और इच्छित मान निकालने के लिए कोई फ़ंक्शन उपयोग करना सुविधाजनक होता है।

कुकी का मूल्य प्राप्त करने का फ़ंक्शन

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

यह फ़ंक्शन split() का उपयोग करके कुंजियों और मानों को विभाजित करता है और यदि यह निर्दिष्ट कुंजी से मेल खाता है तो मान लौटाता है।
decodeURIComponent का उपयोग करके, आप एन्कोड किए गए अक्षरों को सही ढंग से पुनः प्राप्त कर सकते हैं।
यदि संबंधित कुंजी मौजूद नहीं है, तो यह null लौटाता है।

कुकीज़ हटाना

किसी कुकी की समाप्ति तिथि को अतीत की तारीख में सेट करके उसे हटाया जा सकता है।

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

username को खाली मान सौंप कर और समाप्ति तिथि को अतीत में सेट करके, इसे हटाया जा सकता है।
जब आप किसी Cookie को हटाते हैं, तब आपको path, SameSite, और Secure सहित सभी विशेषताओं को उसी प्रकार सेट करना होगा जैसे उसे बनाते समय किया गया था।
इस उदाहरण में, username को हटा दिया गया है, और अन्य Cookie जैसे कि theme=dark बने रहते हैं।

कुकी विकल्प

कुकी के व्यवहार को नियंत्रित करने के लिए आप विभिन्न विकल्प निर्दिष्ट कर सकते हैं। मुख्य विकल्प निम्नलिखित हैं:।

कुकी की समाप्ति तिथि को UTC प्रारूप में निर्दिष्ट करता है। अगर निर्दिष्ट नहीं किया गया तो कुकी सेशन कुकी बन जाती है और ब्राउज़र बंद होते ही मिटा दी जाती है।

कुकी की समाप्ति तिथि को सेकंडों में निर्दिष्ट करता है। यह `expires` से अधिक प्राथमिकता रखता है।

उस पथ को निर्दिष्ट करता है जिस पर कुकी भेजी जाएगी। उदाहरण के लिए, अगर आप `/admin` निर्दिष्ट करते हैं, तो कुकी केवल उसी पथ के अंतर्गत आने वाले पृष्ठों तक भेजी जाएगी।

उस डोमेन को बताता है, जिसके लिए कुकी मान्य है। आमतौर पर इसे वर्तमान डोमेन के लिए सेट किया जाता है, लेकिन आप इसे `.example.com` जैसे सभी सबडोमेन पर भी लागू कर सकते हैं।

जब यह एट्रिब्यूट जोड़ा जाता है, कुकी केवल HTTPS के माध्यम से ही भेजी जाती है। अधिक सुरक्षा के लिए, संवेदनशील जानकारी के लिए हमेशा इस एट्रिब्यूट का उपयोग करें।

यह नियंत्रित करता है कि क्या कुकीज़ को क्रॉस-साइट अनुरोधों पर भेजा जाए। आप निम्नलिखित तीन मानों में से किसी एक को चुन सकते हैं:।

- `Strict`
    कुकीज़ केवल उसी साइट से किए गए अनुरोधों के लिए भेजी जाती हैं।

- `Lax`
    कुकीज़ नियमित नेविगेशन के लिए भेजी जाती हैं, लेकिन कुछ सीमाओं के साथ।

- `None`
    कुकीज़ को क्रॉस-साइट अनुरोधों के लिए भी भेजा जा सकता है। हालांकि, इसके लिए `Secure` एट्रिब्यूट भी आवश्यक है।

उदाहरण: सुरक्षित कुकी

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

यदि आप secure निर्दिष्ट करते हैं, तो Cookie केवल HTTPS संचार के माध्यम से ही भेजा जाएगा।
यदि आप SameSite=Strict निर्दिष्ट करते हैं, तो क्रॉस-साइट अनुरोधों के लिए Cookie नहीं भेजा जाएगा, जो कि CSRF के खिलाफ एक प्रभावी उपाय है।
प्रमाणीकरण या सत्र प्रबंधन के लिए उपयोग किए जाने वाले महत्वपूर्ण Cookie के लिए ऐसे सुरक्षित विशेषताएँ आवश्यक हैं।

एन्कोडिंग और डिकोडिंग

चूंकि कुकी मानों में विशेष अक्षर हो सकते हैं, इसलिए encodeURIComponent का उपयोग करना अधिक सुरक्षित रहता है।

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

encodeURIComponent का इस्तेमाल करके, आप सुरक्षित रूप से Cookie में स्पेस, प्रतीक आदि स्टोर कर सकते हैं।
इसे पढ़ते समय, मूल स्ट्रिंग वापस प्राप्त करने के लिए decodeURIComponent का उपयोग करें।
इस उदाहरण में, समाप्ति अवधि 7 दिन (604,800 सेकंड) सेट करने के लिए max-age=604800 का उपयोग किया गया है। यह समाप्ति तिथि निर्दिष्ट करने की एक विधि है, जो expires के समान है। max-age को सेकंड्स में निर्दिष्ट किया जा सकता है और यह अक्सर उपयोग में आसान होता है।

व्यावहारिक उदाहरण: थीम को सहेजना और लोड करना

यह उदाहरण दिखाता है कि उपयोगकर्ता द्वारा चुनी गई थीम को कुकी में कैसे सहेजें और अगली बार आने पर उसे अपने आप लागू करें।

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

setTheme फ़ंक्शन चयनित थीम को Cookie में सेव करता है और स्क्रीन को अपडेट करने के लिए तुरंत applyTheme को कॉल करता है।
applyTheme फ़ंक्शन थीम के अनुसार body की पृष्ठभूमि और टेक्स्ट रंग बदलता है।
इस उदाहरण में, चूंकि max-age=604800 सेट है, थीम सेटिंग एक सप्ताह तक बनी रहती है।
चूंकि उपयोगकर्ता की चयनित सेटिंग पृष्ठ को पुनः देखने पर बनी रहती है, UX में सुधार होता है।

कुकी सीमाएँ और सावधानियाँ

कुकीज़ का उपयोग करते समय निम्नलिखित बातों का ध्यान रखें:।

आकार सीमाएँ एक कुकी का आकार लगभग 4KB तक सीमित है।
सहेजी जा सकने वाली कुकीज़ की संख्या पर सीमा ब्राउज़र के अनुसार आप प्रति डोमेन लगभग 20 से 50 ही सहेज सकते हैं।
सुरक्षा सावधानियाँ कुकी की सामग्री मूल रूप से सामान्य टेक्स्ट में सहेजी जाती है, इसलिए यह पासवर्ड जैसी गोपनीय जानकारी के लिए उपयुक्त नहीं है।
जावास्क्रिप्ट से अप्राप्य कुकीज HttpOnly विशेषता वाली कुकीज को सुरक्षा कारणों से जावास्क्रिप्ट से नहीं पढ़ा जा सकता है।

सर्वर और `कुकीज`

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

कुछ कुकी विशेषताएँ, जैसे कि HttpOnly, जावास्क्रिप्ट के माध्यम से सेट नहीं की जा सकती हैं। इन्हें सर्वर साइड पर सेट किया जाना चाहिए।

सारांश

जावास्क्रिप्ट के माध्यम से कुकीज को संचालित करना उपयोगकर्ता अनुभव को बेहतर बना सकता है और स्टेट बनाए रख सकता है। हालांकि, उन्हें सुरक्षित और उचित तरीके से संभालने के लिए कृपया निम्नलिखित बिंदुओं को ध्यान में रखें।

केवल न्यूनतम आवश्यक जानकारी ही सहेजें गोपनीयता और सुरक्षा के दृष्टिकोण से व्यक्तिगत या संवेदनशील जानकारी को स्टोर करने से बचें और केवल आवश्यक डेटा ही रखें।
सुरक्षा विशेषताओं को ठीक से सेट करें Secure और SameSite जैसी विशेषताएँ सेट करें ताकि XSS और CSRF जैसे क्रॉस-साइट अटैक से बचा जा सके।
डेटा का एन्कोडिंग और डिकोडिंग Cookie मानों को सुरक्षित रूप से सहेजने और पढ़ने के लिए encodeURIComponent और decodeURIComponent का उपयोग करें, ताकि विशेष अक्षरों और जापानी भाषा को सही से संभाला जा सके।

Cookie का सही उपयोग सीखकर आप अधिक उन्नत और सुरक्षित वेब अनुप्रयोग बना सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

जावास्क्रिप्ट में Shared Worker

जावास्क्रिप्ट और कुकीज़

YouTube Video

जावास्क्रिप्ट और कुकीज़

कुकीज़ बनाना (लिखना)

समाप्ति तिथि वाली कुकीज़ बनाना

कुकीज़ प्राप्त करना (पढ़ना)

कुकी का मूल्य प्राप्त करने का फ़ंक्शन

कुकीज़ हटाना

कुकी विकल्प

उदाहरण: सुरक्षित कुकी

एन्कोडिंग और डिकोडिंग

व्यावहारिक उदाहरण: थीम को सहेजना और लोड करना

कुकी सीमाएँ और सावधानियाँ

सर्वर और कुकीज

सारांश

YouTube Video

सर्वर और `कुकीज`