4.1 জাভাস্ক্রিপ্ট কুকিজ
কুকি হলো আপনার কম্পিউটারে একটি ছোট টেক্সট ফাইল হিসেবে সংরক্ষিত ডাটা। যখন ওয়েব সার্ভার ব্রাউজারে একটি ওয়েব পেজ পাঠায়, পাঠানোর পর ওয়েব সার্ভার ও ব্রাউজারের সংযোগটি বন্ধ হয়ে যায় এবং সার্ভার ব্যবহারকারীর সম্পর্কে সকল তথ্য ভুলে যায় কারণ সার্ভার এবং ব্রাউজারের সাথে তখন কোন সম্পর্ক থাকে না।
“কিভাবে ব্যবহারকারীর সম্পর্কে তথ্য সংরক্ষন করা যায়” এই সমস্যা সমাধান করার জন্যই কুকি উদ্ভাবিত হয়েছে।
- যখন একজন ব্যবহারকারী একটি ওয়েবপেজে ভিজিট করে তখন তার নাম কুকি হিসেবে সংরক্ষন করা যায়।
- পরবর্তী সময়ে ব্যবহারকারী যখন ঐ পেজে ভিজিট করে তখন কুকি তাকে চিনতে পারে।
কুকিগুলোয় জোড়ায় জোড়ায় (name-value) ডাটা সংরক্ষণ করে। যেমনঃ
জাভাস্ক্রিপ্টের মাধ্যমে কুকি তৈরিঃ
document.cookie প্রোপার্টির মাধ্যমে জাভাস্ক্রিপ্ট কুকি তৈরি করতে পারে, পড়তে পারে এবং ডিলেট করতে পারে। জাভাস্ক্রিপ্টের মাধ্যমে এইভাবে কুকি তৈরি করা যায়ঃ
document.cookie=”username = John”;
এছাড়াও আপনি কুকির মেয়াদ শেষ হওয়ার তারিখ(expiry date) নির্ধারণ করতে পারেন(UTC সময়ে)। ডিফল্টভাবে ব্রাউজার বন্ধ করার সাথে সাথে কুকি ডিলেট হয়ে যায়ঃ
document.cookie=”username= javasscript-bootcamp; expires=Mon, 18 Dec 2017 12:00:00 UTC”;
কুকি কোন পেজের জন্য হবে একটি প্যারামিটারের মাধ্যমে আপনি ব্রাউজারকে বলে দিতে পারেন। ডিফল্টভাবে কুকি বর্তমান পেজের জন্যই নেয়া হয়।
document.cookie=”username= javascript-bootcamp; expires=Mon, 18 Dec 2017 12:00:00 UTC; path=/”;
জাভাস্ক্রিপ্টের মাধ্যমে কুকি পড়াঃ
জাভাস্ক্রিপ্টের মাধ্যমে নিম্নলিখিত উপায়ে কুকি পড়া যায়ঃ
var x = document.cookie;
document.cookie একটি স্ট্রিংয়ে সকল কুকিগুলো অনেকটা এইভাবে রিটার্ন করা হয়ঃ cookie1=value; cookie2=value; cookie3=value;
জাভাস্ক্রিপ্টের মাধ্যমে কুকি পরির্বতনঃ
জাভাস্ক্রিপ্টের মাধ্যমে যেভাবে আপনি কুকি তৈরি করেছেন, ঠিক একইভাবে কুকি পরিবর্তন করতে পারেন।
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC”;
উল্লেখ্য যে আপনি যখন কুকি ডিলেট করবেন তখন কুকির ভ্যালু নির্ধারণ করা লাগবে না।
কুকি স্ট্রিংঃ
document.cookie প্রোপার্টিটি দেখতে সাধারন টেক্সট স্ট্রিংয়ের মতো দেখায়। কিন্তু এটি সাধারণ স্ট্রিং নয়। এমনকি আপনি যদি document.cookie তে একটি সম্পূর্ণ কুকি স্ট্রিং লিখেন, যখন আপনি এটি আবার পড়তে যাবেন ,তখন আপনি শুধু name-value এর জোড়ায় জোড়ায় দেখতে পাবেন। আপনি যদি একটি নতুন কুকি সেট করেন, পুরাতন কুকি মুছে যায় না। নতুন কুকি document.cookie তে যোগ হয়, যদি আপনি পুনরায় document.cookie পড়তে যান তাহলে এমন কিছু দেখতে পাবেনঃ cookie1=value; cookie2=value;
আপনি যদি একটি সুনির্দিষ্ট কুকির ভ্যালু খুজে পেতে চান, তাহলে আপনাকে অবশ্যই একটি জাভাস্ক্রিপ্ট ফাংশন লিখতে হবে।
কুকি সেট করার ফাংশনঃ
প্রথমে আমরা একটি ফাংশন তৈরি করি যা ভিজিটরের নাম একটি কুকি ভ্যারিয়েবলে সংরক্ষন করবে।
উপরে ফাংশনের প্যারামিটারগুলোর মধ্যে প্রথমটি হলো কুকির নাম(cname), দ্বিতীয়টি কুকির ভ্যালু(cvalue) এবং শেষেরটি কুকির মেয়াদউত্তীর্ণের তারিখ(exdays)।ফাংশনটি কুকির নাম, কুকির ভ্যালু এবং স্ট্রিংয়ের মেয়াদউত্তীর্ণের তারিখ একত্রে যুক্ত করে একটি কুকি তৈরি করে।
কুকি পাওয়ার ফাংশনঃ
তারপর আমরা একটি ফাংশন তৈরি করি যেটি কুকির ভ্যালু রিটার্ণ করবে।
কুকির নাম(cname) প্যারামিটার হিসেবে নেয়। অনুসন্ধানের জন্য cname + “=” টেক্সটের সাহায্যে একটি ভ্যারিয়েবল(name) তৈরি করেছি। document.cookie কে সেমিকোলনে বিভক্ত করে ca(ca = document.cookie.split(“;”)) অ্যারেতে রাখি। ca অ্যারেতে লুপের(i=0;i<ca.length;i++) মাধ্যমে অ্যারের প্রতিটি মান পড়ি(c =ca[i])। যদি কুকি খুজে পাওয়া যায় (c.indexOf(name) == 0),তাহলে c.substring(name.length,c.length) কুকি ভ্যালু রিটার্ন করে। আর যদি কুকি না পাওয়া যায়, তাহলে “” রিটার্ন করে।
কুকি চেক করার ফাংশনঃ
সর্বশেষ,আমরা একটি ফাংশন তৈরি করি যা দিয়ে কুকি সেট হয়েছে কিনা তা চেক করে। যদি কুকি সেট করা থাকে তাহলে এটি একটি স্বাগত বার্তা প্রদর্শন করবে। আর যদি কুকি সেট করা না থাকে তাহলে setCookie ফাংশন কল করার মাধ্যমে ইহা একটি প্রোম্পট(prompt) বক্স প্রদর্শন করে ব্যবহারকারীর নাম চাইবে এবং ৩৬৫ দিনের জন্য ব্যবহারকারীর নাম সংরক্ষন করবে।
- একটি কুকি স্ট্রিংঃ
document.cookie = “username=Jason Roy; expires=Thu, 14 Nov 2010 12:00:00 UTC”;
- একটি কুকি সেট করি যার name: alex এবং expiry date: ১ সপ্তাহ:
let date = new Date(); data.setTime(date.getTime() + (10*26*60*60)); document.cookie = “name” + “=” + “alex” + “expires=” + date.toUTCString();
- অথেন্টিকেশনে কুকির ব্যবহার:
let date = new Date(); data.setTime(date.getTime() + (2*60*60)); let access_token = ‘sa4343j223r5j3243’ document.cookie = “access_token” + “=” + access_token + “expires=” + date.toUTCString();
- কোনো একটি কুকির অস্তিত্ব আছে কিনা চেক করিঃ
document.cookie = “reader=1; SameSite=None; Secure”; function checkACookieExists() { if (document.cookie.split(‘;’).some((item) => item.trim().startsWith(‘reader=’))) { console.log(‘cookie exists’) } else console.log(‘cookie doesn’t exist’); }
- কুকিটির কোনো নির্দিষ্ট একটি ভ্যালু আছে কিনা তা জানার চেষ্টা করি:
document.cookie = “reader=1; SameSite=None; Secure”; function checkCookieHasASpecificValue() { if (document.cookie.split(‘;’).some((item) => item.includes(‘reader=1’))) { const output = document.getElementById(‘a-specific-value-of-the-cookie’) }
- একটি কুকির সব গুলো ভ্যালু প্রিন্ট করিঃ
document.cookie = “id=1; expires=Thu, 01 Jan 1970 00:00:00 UTC”; let cookies = document.cookie.split(“;”); for(let i = 0; i<cookies.length; i)){ let pair = cookies[i].split(“=”); console.log(`$pair[0]: $pair[1]`) }
- কুকি ইউজ না করে কেন লোকাল স্টোরেজ ব্যবহার করব?
- লোকাল স্টোরেজ এর মেমরি স্পেস কত?
- লোকাল স্টোরেজ এ কোন ‘কি’ এর বিপরীতের ভ্যালু কিভাবে খুজে পাবে?
- লোকাল স্টোরেজ এর সব গুলো কি-ভ্যালু প্রিন্ট কর।
- লোকাল স্টোরেজ কোন কোন ক্ষেত্রে ব্যবহার করা যেতে পারে?
- লোকাল স্টোরেজ এর ভ্যালিডিটি কতক্ষণ থাকে?
- লোকাল স্টোরেজ এর ভ্যালু কি ইটারেবল?
