کوکی ها (Cookies)
در «کوکی های جاوااسکریپت» داده های کوچک ذخیره می شوند. کوکی (Cookie) یعنی فایل متنی خیلی کوچک. سرور بعد از پاسخ، تو را فراموش می کند. اما کوکی کمک می کند یادت نگه دارد.
کوکی های جاوااسکریپت چیست؟
کوکی داده ای متنی روی رایانه تو است. مرورگر هنگام درخواست صفحه، کوکی های همان دامنه را همراه می فرستد. بنابراین سرور دوباره تو را می شناسد.
ساخت کوکی با document.cookie
ویژگی «document.cookie» برای ساخت، خواندن، و حذف کوکی است. مقدار به شکل «name=value» ذخیره می شود.
document.cookie = "username=John Doe";
کوکی با تاریخ انقضا (Expires)
اگر «expires» ندهی، با بستن مرورگر حذف می شود. با «UTC» تاریخ بده تا پایدار بماند.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
کوکی با مسیر (Path)
«path» تعیین می کند کوکی به کدام مسیر سایت تعلق دارد. پیش فرض مسیر همان صفحه است.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
خواندن کوکی
تمام کوکی ها به صورت یک رشته برمی گردند. رشته ای شبیه «cookie1=value; cookie2=value».
let x = document.cookie;
تغییر کوکی
برای تغییر، همان نام را دوباره با مقدار تازه بنویس. کوکی قبلی بازنویسی می شود.
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
حذف کوکی
حذف خیلی ساده است. کافی است «expires» را به گذشته بدهی. بهتر است «path» صحیح را هم بدهی.
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
توابع کاربردی: set/get/check
حالا سه تابع می سازیم. ساخت، گرفتن مقدار، و بررسی وجود کوکی. این الگو ساده و عملی است.
تابع setCookie
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=/";
}
تابع getCookie
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 "";
}
تابع checkCookie
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);
}
}
}
نمونه کامل
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 ca = document.cookie.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, 365);
}
}
}
هشدار: اگر پشتیبانی کوکی در مرورگر خاموش باشد، نمونه ها کار نمی کنند.
برای ادامه مرتبط، صفحه زمان بندی و صفحه پنجره های هشدار را ببین. همچنین لینک کوکی های جاوااسکریپت را نگه دار.
جمع بندی سریع
- ساخت با document.cookie انجام می شود.
- برای ماندگاری، expires را تنظیم کن.
- برای حذف، expires گذشته بده.
- برای مسیر درست، path را مشخص کن.
- برای جستجو، getCookie بنویس.