အားလုံးပဲ မင်္ဂလာပါခင်ဗျ။

ကျွန်တော်ကတော့ Spiceworks Myanmar Company တွင် Web Designer အဖြစ် ဝင်ရောက် အလုပ်လုပ်ကိုင်နေတဲ့ မောင်ကျော်စိုးနိုင် ဖြစ်ပါတယ်ခင်ဗျ။
ဒီတစ်ပတ်မှာတော့ Website တစ်ခုမှာ အရေးပါတဲ့ JavaScript Cookies အသုံးပြုပုံနဲ့ ပတ်သက်ပြီး ကျွန်တော် လေ့လာမိသလောက် မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။

ပထမဦးဆုံးအနေနဲ့ Cookies ဘယ်လိုစပေါ်လာလဲဆိုတာ ပြောပြပေးသွားမှာ ဖြစ်ပါတယ်။
အရင်တုန်းက ecommerce website တွေမှာဆိုရင် အသုံးပြုတဲ့ users အနေနဲ့ ဘယ်နေရာကို ဝင်ထားလဲ၊ ဘယ်ကို ရောက်နေလဲဆိုတဲ့ အခြေအနေတွေကို server ပေါ်မှာ မှတ်ထားပါတယ်။ Cookie စတင်အသုံးမပြုခင်အချိန်တုန်းက ecommerce website တွေမှာဆိုရင် အသုံးပြုတဲ့ user အရေအတွက် များလာတဲ့အခါမှာ users အားလုံးရဲ့ အခြေအနေအားလုံးကို server ပေါ်မှာ မှတ်ထားမယ်ဆိုရင် server အတွက် resources confusing အရမ်းများလာတဲ့အတွက် အားလုံးကိုမှတ်ထားဖို့ အဆင်မပြေဖြစ်လာပါတယ်။ အဲ့ဒီပြဿနာကို ဖြေရှင်းဖို့အတွက် အသုံးပြုတဲ့ users တွေရဲ့ အခြေအနေအားလုံးကို client စက်ထဲမှာ မှတ်ဖို့ စဉ်းစားလာပါတယ်။ အဲ့ဒီလိုမှတ်ဖို့ရန်အတွက် cookie ဆိုပြီးဖြစ်လာပါတယ်။

What is Client and Server?
Client ဆိုတာက အသုံးပြုသူ user ရဲ့စက်ဖြစ်ပြီး server ဆိုတာတော့ website ရှိတဲ့နေရာကိုဆိုလိုတာဖြစ်ပါတယ်။

What is Cookies?
Cookie ဆိုတာက အသုံးပြုသူ user ရဲ့အခြေအနေအားလုံးကို သေးငယ်သော data အဖြစ် ပြောင်းလဲပြီး browser ထဲမှာ store လုပ်ထားခြင်း ဖြစ်ပါတယ်။
Cookie က stateless technology ဖြစ်ပြီး user အားလုံးရဲ့ အခြေအနေတွေကို server ပေါ်မှာထိန်းသိမ်းထားခြင်းမရှိဘဲ data အားလုံးကို client စက်ထဲမှာ cookie data အနေနဲ့ ထိန်းသိမ်းထားခြင်း ဖြစ်ပါတယ်။ ဒါကြောင့် cookie ဆိုတာ အသုံးပြုသူ user ရဲ့စက်ထဲမှာ မှတ်ထားခြင်းကို ဆိုလိုပါတယ်။
Cookies တွေကို အဓိကအားဖြင့် အောက်ပါ အချက်(၃)ချက်အတွက် အသုံးပြုပါတယ်။

1.Session Management
Session Management ဆိုတာ အသုံးပြုသူ user အနေနဲ့ login ဝင်ထားသလား login ဝင်ထားတယ်ဆိုရင် login ဝင်ထားတဲ့ login cookie data တစ်နည်းအားဖြင့် user ရဲ့ စက်ထဲမှာ ရှိတဲ့  login cookie data ကို server ဆီ request လုပ်လိုက်ပါတယ်။ Request လုပ်လာတဲ့ login cookie data နှင့် server မှာရှိသော login data ကို compare လုပ်ပြီး login ဝင်ထားသလား စစ်ပေးခြင်းကို session management လုပ်ခြင်းလို့ခေါ်ပါတယ်။

2.Personalization
Personalization ဆိုတာကတော့ မိမိ website ကို light themes သုံးမလား၊ dark themes သုံးမလား ရွေးချယ်တဲ့အခါ အသုံးပြုပါတယ်။ ဒါ့အပြင် languageအနေနဲ့ english သုံးမလား၊ myanmar သုံးမလား မိမိစိတ်ကြိုက် ရွေးချယ်အသုံးပြုတဲ့အခါတွင်လည်း personalization ကို အသုံးပြုပါတယ်။

3.Tracking
Tracking ကတော့ ecommerce website တော်တော်များများမှာ အသုံးပြုပါတယ်။
ဥပမာ အသုံးပြုတဲ့ user က ecommerce website တစ်ခုဖြစ်တဲ့ shop.com မှာ laptop ဝယ်ဖို့ search မှာဝင်ပြီး laptop လို့ရေးလိုက်ရင် ရေးလိုက်တဲ့ laptop ဆိုတဲ့ keyword ကို cookie အနေနဲ့သိမ်ထားပြီး နောက်တစ်ခါ laptop ဝယ်ချင်လို့ shop.com ကိုပြန်ဝင်လာတဲ့အခါ laptop နဲ့ ပတ်သက်တဲ့ brand များစွာကို ရွေးချယ်လို့ရအောင် ပြပေးပါတယ်။ အဲ့ဒီလို အခြေအနေမှာဆိုရင်Tracking ကို အသုံးပြုပါတယ်။

Fields
Cookie တစ်ခုကို အသုံးပြုမယ်ဆိုရင် လိုအပ်တဲ့ fields တွေကတော့

1.Name
Cookie တစ်ခုမှာ cookie name တစ်ခု သတ်မှတ်ပေးဖို့ လိုအပ်ပါတယ်။

2.Value
Cookie Name ရဲ့နောက်မှာ cookie value သတ်မှတ်ပေးရပါတယ်။ Cookie Name နှင့် Cookie Value က pair ဖြစ်ပြီး အောက်ပါအတိုင်း သတ်မှတ်ပါတယ်။

username=Kyaw Kyaw

3.Path
မိမိ create လုပ်လိုက်တဲ့ cookie ကို ဘယ် URL မှာ အသုံးပြုခွင့်ပေးမလဲဆိုတာ path လမ်းကြောင်း သတ်မှတ်ပေးရပါတယ်။

4.Expires
မိမိ create လုပ်လိုက်တဲ့ cookie ကို တစ်ရက်၊ တစ်လ၊ တစ်နှစ် ဘယ်လောက်အချိန်ထိ အသုံးပြုခွင့်ပေးမလဲဆိုတာ expire သတ်မှတ်ဖို့လိုအပ်ပါတယ်။

5.Domain
Cookie ကို ဘယ် domain name မှာ အသုံပြုခွင့်ပေးမလဲဆိုတာ သတ်မှတ်ပေးဖို့လိုအပ်ပါတယ်။ ဥပမာ https://www.shop.com.mm/

Cookie နဲ့ပတ်သက်ပြီး သိသင့်တဲ့အချက်လေးတွေကို ပြောပြပြီးပြီဆိုတော့ ဆက်လက်ပြီး javascript မှာ ဘယ်လိုအသုံးပြုပုံရမလဲဆိုတာကို ပြောပြပေးသွားပါမည်။

Create a Cookie with JavaScript
Javascript ဖြင့် cookie တစ်ခုကို create ,read နှင့် delete လုပ်ချင်တဲ့အခါမှာဆိုရင် document.cookie property ကို အသုံးပြုရပါတယ်။

document.cookie = "username=Kyaw Kyaw";

Expires date ထပ်ထည့်မည်ဆိုပါက အောက်ပါအတိုင်းဖြစ်ပါတယ်။

document.cookie = "username=Kyaw Kyaw; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Cookies အလုပ်လုပ်ချင်တဲ့ url လမ်းကြောင်းအား သတ်မှတ်ပေးမည်ဆိုပါက အောက်ပါအတိုင်း သတ်မှတ်အသုံးပြုလို့ ရပါတယ်။

document.cookie = "username=Kyaw Kyaw; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

JavaScript Cookie သတ်မှတ်ချက်တွေကို နားလည်ပြီးဆိုရင် cookies example လေးတစ်ခုကို ရေးပြသွားမည် ဖြစ်ပါတယ်။

User တစ်ယောက်က မိမိ website ကိုအသုံးပြုလာလျှင် အသုံးပြုသူ user ရဲ့နာမည်ကို ရိုက်ပြီး cookie မှာသိမ်းမလား မေးတဲ့ ပုံစံလေးရေးပါမည်။ Cookie မှာသိမ်းပြီး အသုံးပြုသူ user က နောက်တစ်ကြိမ်ထပ်ဝင်လာလျှင် userရဲ့နာမည်ကို welcome အနေနဲ့ ပြသွားတဲ့ပုံစံကို ရေးပြသွားမည် ဖြစ်ပါတယ်။

Set a Cookie
Website ကိုအသုံးပြုနေတဲ့ user ရဲ့နာမည်ကို cookies မှာသိမ်းဖို့ရန် setCookie function တစ်ခုကို အောက်ပါအတိုင်းရေးရန် လိုအပ်ပါတယ်။

function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

SetCookie function မှာ cookies name, cookies value ,expire day ဆိုပြီး parameter (၃)မျိုး ပါဝင်ပါတယ်။

Get a Cookie
Cookie ရှိတယ်ဆိုရင် cookie name ကိုရရှိရန် getCookie function ကို အောက်ပါအတိုင်းရေးပါမည်။

function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

GetCookie function မှာတော့ cookies name parameter တစ်ခုပါဝင်ပါတယ်။
အသုံးပြုသူ username က cookies ထဲမှာရှိမရှိကို getCookie function နဲ့ စစ်ပြီး ရှိရင် username ကို return ပြန်ထုတ်ပေးပါတယ်။ Username မရှိရင်တော့ null ပြန်ထုတ်ပေးပါတယ်။
SetCookie နှင့် GetCookie အသုံးပြုပုံကို သိသွားပြီးဆိုတော့ user က website ကို ပထမဆုံးစတင်အသုံးပြုတာလား သိရှိစေရန် checkCookie function ကို အသုံးပြုပြီး စစ်ဆေးပါမည်။

Check a Cookie

function checkCookie() {
let username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}

User အနေနဲ့ ပထမဆုံး အသုံးပြုသူဖြစ်လျှင် အသုံးပြုသူရဲ့နာမည်ကို ရိုက်ပြီး setCookies မှာ cookies name ,cookie value ,expired day ကို ရိုက်ပြီးသိမ်းထားပါမည်။ Userက ဒုတိယတစ်ကြိမ် အနေနဲ့ အသုံးပြုမည်ဆိုပါက cookie မှာသိမ်းထားတဲ့ နာမည်ကို ထုတ်ပြီး Welcome again username ဆိုပြီး ပြသွားမှာဖြစ်ပါတယ်။

Coding sample အားလုံးကိုတော့ အောက်ကအတိုင်းရေးပြီး test လုပ်နိုင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

function checkCookie() {
let user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

အခုမှစလေ့လာမယ့် သူတွေအတွက် ဗဟုသုတတိုးပွားပြီး တစ်စုံတစ်ခုအကျိုးရှိမယ်လို့ မျှော်လင့်မိပါတယ်။
အချိန်ပေးပြီး ဖတ်ရှု့ပေးခဲ့ကြတဲ့အတွက် ကျေးဇူးတင်ပါတယ်ခင်ဗျ။