জাভাস্ক্রিপ্ট এবং কুকিজ

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 নির্ধারণ করলে কুকি কেবলমাত্র HTTPS যোগাযোগের জন্য সীমাবদ্ধ হয়, যা নিরাপত্তা বাড়ায়।
document.cookie দ্বারা, আপনি বর্তমান পাতায় উপলব্ধ সমস্ত কুকিকে একটি স্ট্রিং হিসেবে পেতে পারেন।
console.log ব্যবহার করে, আপনি ব্রাউজারে নির্ধারিত প্রকৃত কুকি মান এবং ফেরত পাওয়া কুকি মানের পার্থক্য দেখতে পারেন।

কুকি পাওয়া (পড়া)

আপনি 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-এর ফেরত মান হলো একটি একক স্ট্রিং, যেখানে সমস্ত কুকি '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-এ একটি খালি মান নির্ধারণ করে এবং মেয়াদোত্তীর্ণ তারিখটি অতীতে সেট করলে, এটি মুছে যাবে।
কুকি মুছে ফেলার সময়, অবশ্যই path, SameSite, এবং Secure বৈশিষ্ট্যগুলি সেই মানগুলির সাথে মেলাতে হবে যেগুলো তৈরি করার সময় ব্যবহৃত হয়েছিল।
এই উদাহরণে, username মুছে ফেলা হয়েছে, এবং অন্যান্য কুকি যেমন theme=dark থেকে যায়।

কুকি বিকল্পসমূহ

আপনি কুকির আচরণ নিয়ন্ত্রণের জন্য বিভিন্ন অপশন নির্দিষ্ট করতে পারেন। প্রধান বিকল্পগুলো নিম্নরূপ:।

কুকির মেয়াদোত্তীর্ণ তারিখ UTC ফরম্যাটে নির্দিষ্ট করা হয়। যদি নির্দিষ্ট না করা হয়, তবে কুকি সেশন কুকি হয়ে যায় এবং ব্রাউজার বন্ধ হলে মুছে যায়।

কুকির মেয়াদোত্তীর্ণ তারিখ সেকেন্ডে নির্ধারণ করে। এটা `expires`-এর তুলনায় অধিক অগ্রাধিকার পায়।

যে পথের জন্য কুকি পাঠানো হবে তা নির্ধারণ করে। উদাহরণস্বরূপ, যদি আপনি `/admin` নির্ধারণ করেন, তাহলে কুকি কেবল সেই পথের আওতাধীন পাতায়ই পাঠানো হবে।

যে ডোমেইনের জন্য কুকি বৈধ তা নির্ধারণ করা হয়। সাধারণত, এটি বর্তমান ডোমেইনের জন্য নির্ধারিত হয়, তবে আপনি এটি সকল সাবডোমেইনেও প্রয়োগ করতে পারেন, যেমন `.example.com`।

এই অ্যাট্রিবিউট নির্ধারণ করা হলে কুকি কেবল HTTPS এর মাধ্যমে পাঠানো হয়। নিরাপত্তা বাড়াতে, সংবেদনশীল তথ্যের জন্য অবশ্যই এই অ্যাট্রিবিউট ব্যবহার করুন।

কুকি ক্রস-সাইট অনুরোধের সময় পাঠানো হবে কিনা তা নিয়ন্ত্রণ করে। আপনি নিম্নোক্ত তিনটি মানের মধ্যে একটি নির্ধারণ করতে পারেন:।

- `Strict`
    কুকি কেবল একই সাইটের অনুরোধের জন্য পাঠানো হয়।

- `Lax`
    স্বাভাবিক নেভিগেশনের জন্য কুকি পাঠানো হয়, তবে কিছু সীমাবদ্ধতা রয়েছে।

- `None`
    ক্রস-সাইট অনুরোধের জন্যও কুকি পাঠানো যেতে পারে। তবে, `Secure` অ্যাট্রিবিউটও আবশ্যক।

উদাহরণ: সুরক্ষিত কুকি

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

secure নির্ধারণ করলে, কুকি কেবল HTTPS যোগাযোগের মাধ্যমে পাঠানো হবে।
SameSite=Strict নির্ধারণ করলে, কুকি ক্রস-সাইট অনুরোধের জন্য পাঠানো হবে না, যা CSRF প্রতিরোধের জন্য কার্যকর।
প্রমাণীকরণ বা সেশন ব্যবস্থাপনার জন্য ব্যবহৃত গুরুত্বপূর্ণ কুকির ক্ষেত্রে এই ধরনের নিরাপদ বৈশিষ্ট্য অপরিহার্য।

এনকোডিং ও ডিকোডিং

কুকির মানে বিশেষ অক্ষর থাকতে পারে, তাই 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 ব্যবহার করে, আপনি নিরাপদভাবে কুকিতে স্পেস, চিহ্ন ইত্যাদি সংরক্ষণ করতে পারেন।
এটি পড়ার সময়, মূল স্ট্রিং ফেরত পেতে decodeURIComponent ব্যবহার করুন।
এই উদাহরণে, 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 ফাংশনটি নির্বাচিত থিম কুকিতে সংরক্ষণ করে এবং সঙ্গে সঙ্গেই applyTheme কল করে স্ক্রিন আপডেট করে।
applyTheme ফাংশনটি থিম অনুযায়ী body'র ব্যাকগ্রাউন্ড এবং টেক্সটের রং পরিবর্তন করে।
এই উদাহরণে, max-age=604800 নির্ধারিত থাকায়, থিম সেটিং এক সপ্তাহের জন্য সংরক্ষিত থাকে।
কারণ ব্যবহারকারীর নির্বাচিত থিম পৃষ্ঠায় পুনরায় যাওয়ার সময়ও রয়ে যায়, ফলে UX উন্নত হয়।

কুকির সীমাবদ্ধতা ও সতর্কতা

কুকি ব্যবহারের সময় নিম্নোক্ত বিষয়গুলো মনে রাখুন:।

আকারের সীমাবদ্ধতা একটি কুকির আকার প্রায় ৪ কিলোবাইটে সীমিত।
সংরক্ষণযোগ্য কুকির সংখ্যার সীমা ব্রাউজারের উপর নির্ভর করে, আপনি প্রতি ডোমেইনে প্রায় ২০ থেকে ৫০টি পর্যন্ত সংরক্ষণ করতে পারেন।
নিরাপত্তা সতর্কতাসমূহ কুকির বিষয়বস্তু সাধারণত প্লেইন টেক্সটে সংরক্ষিত হয়, তাই এটি পাসওয়ার্ডের মতো গোপনীয় তথ্য সংরক্ষণের জন্য উপযুক্ত নয়।
জাভাস্ক্রিপ্ট থেকে প্রবেশ করা যায় না এমন কুকি HttpOnly অ্যাট্রিবিউটযুক্ত কুকি নিরাপত্তার কারণে জাভাস্ক্রিপ্ট থেকে পড়া যাবে না।

সার্ভার এবং `কুকি`

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

কিছু কুকি অ্যাট্রিবিউট, যেমন HttpOnly, জাভাস্ক্রিপ্টের মাধ্যমে সেট করা যায় না। এগুলো অবশ্যই সার্ভার সাইডে সেট করতে হবে।

সারসংক্ষেপ

জাভাস্ক্রিপ্ট দিয়ে কুকি সম্পাদনা করা ব্যবহারকারীর অভিজ্ঞতা বৃদ্ধি করতে এবং অবস্থা বজায় রাখতে সহায়তা করতে পারে। তবে, দয়া করে এগুলো নিরাপদ এবং সঠিকভাবে পরিচালনা করার জন্য নিম্নলিখিত বিষয়গুলো বিবেচনায় রাখুন।

শুধুমাত্র ন্যূনতম প্রয়োজনীয় তথ্য সংরক্ষণ করুন গোপনীয়তা এবং নিরাপত্তার দিক থেকে, ব্যক্তিগত বা সংবেদনশীল তথ্য সংরক্ষণ এড়িয়ে চলুন এবং শুধুমাত্র প্রয়োজনীয় তথ্য সংরক্ষণ করুন।
নিরাপত্তা অ্যাট্রিবিউট সঠিকভাবে সেট করুন Secure এবং SameSite এর মতো অ্যাট্রিবিউট সেট করুন যাতে XSS ও CSRF-এর মতো ক্রস-সাইট আক্রমণ প্রতিরোধ করা যায়।
ডেটা এনকোডিং এবং ডিকোডিং encodeURIComponent এবং decodeURIComponent ব্যবহার করুন যাতে বিশেষ অক্ষর এবং জাপানি সঠিকভাবে পরিচালনা করার জন্য নিরাপদে কুকি মান সংরক্ষণ ও পড়া যায়।

কুকি ব্যবহারের সঠিক পদ্ধতি শিখে, আপনি আরও উন্নত এবং নিরাপদ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

জাভাস্ক্রিপ্টে শেয়ার্ড ওয়ার্কার

জাভাস্ক্রিপ্ট এবং কুকিজ

YouTube Video

জাভাস্ক্রিপ্ট এবং কুকিজ

কুকি তৈরি (লিখা)

মেয়াদোত্তীর্ণ তারিখসহ কুকি তৈরি

কুকি পাওয়া (পড়া)

কুকির মান পাওয়ার ফাংশন

কুকি মুছে ফেলা

কুকি বিকল্পসমূহ

উদাহরণ: সুরক্ষিত কুকি

এনকোডিং ও ডিকোডিং

ব্যবহারিক উদাহরণ: থিম সংরক্ষণ ও লোড করা

কুকির সীমাবদ্ধতা ও সতর্কতা

সার্ভার এবং কুকি

সারসংক্ষেপ

YouTube Video

সার্ভার এবং `কুকি`