زمانی که حرف از حافظه در علوم کامپیوتر می شود دو نوع حافظه مد نظر ما است . حافظه موقت یا RAM یا حافظه دائمی یا Hard Disk می باشد . این حافظه ها در مفسر برای انواع امکانات نظیر Cookie , Local Storage , Session Storage استفاده می شود.بسته به این که حافظه موقت است یا دائم از یکی از حافظه های کامپیوتر استفاده می کند ، حال این که قرار باشد در client باشد یا server از حافظه همان کامپیوتر استفاده می شود.

Cookies

پروتکل Http از مرسوم ترین پروتکل های ارتباطی میان client و server است. یکی از مشکلات این پروتکل عدم پیگیری اطلاعات به صورت پیش فرض در میان درخواست ها و پاسخ ها می باشد. یعنی نمی توان اطلاعاتی از پاسخ درخواست فعلی در درخواست بعدی استفاده کرد.

پیش از استفاده از حافظه Cookie تمامی درخواست ها به صورت unique بوده است . حتی درخواست هایی که از سمت یک کلاینت به یک route ارسال می شده با یک Request Body مشخص . پس از استفاده از Cookie ها با استفاده از این حافظه می توانستیم در هر گام از چرخه درخواست تا پاسخ اطلاعات را میان client و سرور جا به جا کنیم.

Cookie ها یک فایل متنی در کامپیوتر Client به مقدار 4KB می باشند. این حافظه به صورت یک رشته متنی در document هر صفحه قابل دسترسی است . به طور مثال می توان لیست کوکی های صفحه جاری را به شکل زیر نمایش داد.

document.cookie
//"__gads=ID=71a4d50f329acc96:T=1636907374:S=ALNI_MbtiWlmRksZJrPXPAT7fh7uWoOkTQ; ASPSESSIONIDACQRTQSQ=MACLLDABDIEGGMILBAJOOOBD; ASPSESSIONIDCCTRSSSS=BKNJNIABFIDFLPIEHMNAMJGF; _ga=GA1.2.256314969.1636907336; _gid=GA1.2.1417394390.1658606944; _pbjs_userid_consent_data=6683316680106290; _lr_retry_request=true; _lr_env_src_ats=false; __gpi=UID=000005d2ac8647fb:T=1651580404:RT=1658606954:S=ALNI_MaIlh812Wgm5krJp952zs3HpmYilA"

به صورت کلی دو نوع Cookie داریم .

• Session : بر اساس نشست فعلی است و فاقد زمان انقضا و پس از اتمام نشست (مثلا بسته شدن تب یا پنجره مرورگر) این حافظه تخلیه می گردد.
• Expire : بر اساس زمان انقضا می باشد و ارتباطی با نشست ندارد و عموم Cookie هایی که در جاوا اسکریپت تعریف می کنیم از این نوع است .

حافظه Cookie در میان درخواست و پاسخ رد و بدل می گردد. به این شکل که در Request/Response Header رد و بدل می گردد ، زمان Request در Cookie Header و زمان Respons در Set-Cookie Header ثبت می گردد. پس می توان گفت افزایش میزان Cookie افزایش Bandwidth می باشد.

برای Cookie ست کردن از فرمول زیر استفاده می کنیم:

document.cookie = "key=value; params..."

در زمان افزودن یک Cookie مهم ترین ویژگی های آن برای افزودن path , max-age می باشد.

path

این مقدار برای تعیین ناحیه دسترسی Cookie می باشد . به این شکل که اگر این مقدار را برابر با ‘/’ یا همان Root وب سایت قرار بدهیم در تمامی Endpoint های وب سایت قابل دسترس خواهد بود اما اگر برابر با Endpoint خاصی قرار بدهیم در سایر route های وب سایت قابل دسترس نمی باشد.

document.cookie='name=abolfazl; Path' + window.location.pathname

پس ناحیه دسترسی برای Cookie برابر با name مقدار Path:"/window-object-methods" است. اگر برابر با مقدار ‘/’ قرار بدهید در تمامی وب سایت قابل دسترس است.

max-age

حداکثر زمان انقضای Cookie است به صورت milisecond . به این شکل که همانند مثال قبل در ساختار کوکی این پارامتر را نیز set می کنیم:

document.cookie = "famil=sabagh; max-age=" + (60*60*60) * 5

در مثال بالا مقدار ۵ ساعت را به عنوان حداکثر عمر این کوکی در نظر گرفتیم که معادل عبارت 60 * 60 * 60 که معادل یک ساعت است ضرب در مقدار ۵ می باشد.

expire

پارامتر expire برابر مقدار max-age است منتها ورودی آن زمان انقضا است با فرمت Date.toUTCString() می باشد .

var expDate = new Date()
document.cookie = 'job=software-engineer; expire' + expDate.toUTCString(); //"Sat, 23 Jul 2022 21:22:29 GMT"

برای دریافت کوکی بر اساس کلید می توان از تابع زیر استفاده کرد:

function getCookie(name) {
    var value = "; " + document.cookie;
    var parts = value.split("; " + name + "=");
    if (parts.length == 2)
    return parts.pop().split(";").shift();
}

کتابخانه JS Cookies

بعد از قرار دادن این کتابخانه در سورس صفحه وب خود می توانید از متد های این کتابخانه برای ست کردن کوکی استفاده کنید.

Cookies.set('foo', 'bar')
Cookies.get('name')
Cookies.remove('name')

Local Storage

نوع دیگری از حافظه ها که در HTML5 معرفی شدند که بسیار شبیه به Cookie ها هستند با این تفاوت که زمان انقضا ندارند و در درخواست و پاسخ میان سرور و کلاینت رد و بدل نمی شوند.

مزایای استفاده از Local Storage بسته به Cookie :

• کاهش حجم داده رد و بدل شده میان سرور و کلاینت یا به عبارتی کاهش استفاده از Bandwidth
• داده های Cookie ممکن است به علت قطعی اتصالات اینترنت در زمان جابه جایی میان سرور و کلاینت تغییر پیدا کنند.
• داده ها در Local Storage به صورت پایدار هستند و باید به صورت دستی توسط جاوا اسکریپت پاک شوند.
• میزان حجم داده ای که می توان در آن ذخیره کرد بین 5/10 MB می باشد.

local storage , session storage یک سری ویژگی از شئ BOM یا همان window می باشند. به همین ترتیب قرار است به صورت window.localStorage استفاده شوند یا به صورت خلاصه تر localStorage .

window.localStorage
//Storage { wpfssl_upsell_shown_timestamp: "1650226963931", wc_cart_hash_9b95772571cb57b7e84a14ea4e02bb12: "", wpfssl_upsell_shown: "true", length: 3 }
window.localStorage.setItem('name','abolfazl')
window.localStorage.getItem('name')
//"abolfazl"
window.localStorage.removeItem('name')
window.localStorage.clear()

داده های موجود در localStorage , sessionStorage در تمامی روت های دامنه جاری – Path – قابل دسترس است .

Session Storage

این نوع از حافظه در جاوا اسکریپت بسته به نشست برقرار شده در مرورگر (پس از بستن تب مرورگر حذف می گردد.) . این داده از نظر رفتار بسیار شبیه به localStorage می باشد و تنها زمان انقضای آن بستگی به نشست جاری مرورگر دارد و ناحیه دسترسی نیز بسته به تب یا پنجره یا مرورگر جاری است.

window.sessionStorage.setItem('name','reza')
window.sessionStorage.getItem('name')
//"reza"
window.sessionStorage.removeItem('name')
window.sessionStorage.clear()

ناحیه دسترسی در این نوع حافظه بسته به همان تب یا پنجره جاری که در آن تعیین شده است می باشد. یعنی اگر در یک تب یک آیتم اضافه کردید در path دیگر از همان دامنه قابل دسترس نیست .

تمامی حافظه های ذکر شده مختص کلاینت بوده و بر بستر سیستم عامل کاربر مرورگر می باشد.