Design

JavaScript Cookies

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

ကြၽန္ေတာ္ကေတာ့ 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>

အခုမွစေလ့လာမယ့္ သူေတြအတြက္ ဗဟုသုတတိုးပြားၿပီး တစ္စုံတစ္ခုအက်ိဳးရွိမယ္လို႔႔ ေမွ်ာ္လင့္မိပါတယ္။
အခ်ိန္ေပးၿပီး ဖတ္ရႈ႕ေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *