LocalStorage VS SessionStorage VS Cookies

سلام، تو این پست میخوایم تفاوتای بین localStorage و SessionStorage و Cookies رو بررسی کنیم و ببینیم که تو موقعیت های متفاوت بهتره از کدوم متد برای ذخیره و کش داده ها تو سمت کلاینت استفاده بشه.

1) localStorage :

خب ما میتونیم از طریق localstorage یه سری داده هارو تو سیستم کلاینت ذخیره کنیم. لوکال استوریج بهمون این امکان رو میده که داده هارو بصورت key/value تو سیستم کلاینت ذخیره کنیم و expiration date هم نداره که یعنی این دیتا از بین نمیره مگه اینکه ما خودمون از طریق کد اونو پاک کنیم یا کاربر خودش بصورت دستی از مرورگرش کل دیتا یا بخشیش رو پاک کنه. خب بیاید مزایا و معایب localStorage رو بررسی کنیم.

مزایا:

• میتونیم داده‎‌هامون رو بدون expiration date تو سمت کلاینت ذخیره کنیم.
• یه فضای ذخیره سازی تا حدود 5MB برامون داره.
• داده‌های ذخیره شده بصورت پیش‌فرض به سرور ارسال نمیشن، مگه اینکه خودمون بخوایم.

معایب:

• هنگام ذخیره سازی value های ما بصورت string ذخیره میشن که از لحاظ امنیتی زیاد جالب نیست، البته که خودمون میتونیم encrypt و decrypt کنیم، ولی به عبارتی by design امنیت جالبی نداره.
• همونطور که تو مورد قبلی گفتیم، value های ما باید بصورت string ذخیره بشن که یعنی اگه شما بخواید یه object رو تو لوکال استوریج کاربر ذخیره کنید باید هر بار اون رو استرینگ کنید و هنگام استفاده ازش هم parse ـش کنید.

const data = {
name: 'JohnDoe',
age: 23
}
// به منظور ذخیره سازیش تو لوکال استوریج
localStorage.setItem('testData', JSON.stringify(data))
// و حالا اگه بخوایم از همون استفاده کنیم
const savedData = JSON.parse(localStorage.getItem('testData'))

• فقط میشه سمت کلاینت به این value ها دسترسی داشت که یعنی تو سمت سرور قابل دسترسی نیستن.
  

متدهای موجود در LocalStorage :

• ایجاد Value:
  با این متد یه پراپرتی با key و value ای که بهش پاس داده شده داخل لوکال استوریج ساخته میشه.

localStorage.setItem('Name', &quotJohn Doe&quot)

به عنوان مثال از طریق این کد یه پراپرتی تو لوکال استوریج ایجاد کردیم با key:Name و Value:John Doe.

• دریافت Value ایجاد شده:
  تو این متد کافیه key پراپرتی که قبلا ایجاد کردیم رو وارد کنیم و به value ای که تو لوکال استوریج ذخیره شده دسترسی پیدا کنیم، اینو در نظر داشته باشید که اگه value ای با اون اسم تو لوکال استوریج نباشه null برگردونده میشه.

localStorage.getItem('Name')

• حذف Value:
  با این متد ما میتونیم Value ای که از قبل تو لوکال استوریج ایجاد شده رو حذف کنیم. فقط کافیه key پراپرتی رو بهش پاس بدیم.

localStorage.removeItem('Name')

• حذف تمامی موارد:
  با این متد میتونیم تمامی پراپرتی های ایجاد شده تو لوکال استوریج رو بصورت یکجا حذف کنیم.
  

localStorage.clear()

2) sessionStorage:

خب sessionStorage هم همونطور که از اسمش مشخصه، فقط مختص یک session ـه، یعنی تا زمانی value ها وجود دارن که کاربر یا مرورگر رو ببنده یا تب‌ای که این value ها درش ایجاد شده، اگه بخوایم یه نگاه کلی بهش داشته باشیم:

• داده رو فقط برای اون session ذخیره میکنه که یعنی داده تا زمانی موجوده که کاربر تب یا مرورگر رو ببنده.
• داده‌های ذخیره شده بصورت پیش‌فرض به سرور ارسال نمیشن، مگه اینکه خودمون بخوایم.
• یه فضای ذخیره‌سازی بین 5MB-10MB بهمون میده.
• باز کردن تب ها یا ویندو های متفاوت با همون url باعث ایجاد sessionStorage های اختصاصی برای هرکدومشون میشه.
• متدهای موجود توش مشابه متدهای localStorage هستن.

متدهای موجود در sessionStorage:

• ایجاد Value:

با این متد یه پراپرتی با key و value ای که بهش پاس داده شده داخل سشن استوریج ساخته میشه.

sessionStorage.setItem('Name', &quotJohn Doe&quot)

به عنوان مثال از طریق این کد یه پراپرتی تو سشن استوریج ایجاد کردیم با key:Name و Value:John Doe.

• دریافت Value ایجاد شده:

تو این متد کافیه key پراپرتی که قبلا ایجاد کردیم رو وارد کنیم و به value ای که تو سشن استوریج ذخیره شده دسترسی پیدا کنیم، اینو در نظر داشته باشید که اگه value ای با اون اسم تو سشن استوریج نباشه null برگردونده میشه.

sessionStorage.getItem('Name')

• حذف Value:

با این متد ما میتونیم Value ای که از قبل تو سشن استوریج ایجاد شده رو حذف کنیم. فقط کافیه key پراپرتی رو بهش پاس بدیم.

sessionStorage.removeItem('Name')

• حذف تمامی موارد:

با این متد میتونیم تمامی پراپرتی های ایجاد شده تو سشن استوریج رو بصورت یکجا حذف کنیم.

sessionStorage.clear()

3) Cookies:

خب کوکی ها تکست فایل هایی هستن که معمولا برای مقاصد احراز هویت و user tracking و داشتن preference های کاربر ایجاد و ذخیره میشن، میشه گفت بزرگترین مزیت Cookie ها نسبت به سشن استوریج و لوکال استوریج این ـه که از طریق سرور هم قابل دسترسی هستند. اگه بخوایم یه نگاه کلی بهش داشته باشیم:

• یه فضای ذخیره سازی تا 4kb برامون فراهم میکنن.
• تو هر ارسال ریکوئست به سرور به header ریکوئست attach میشن و یکی از دلایل اصلی که فضای ذخیره‌سازی خیلی پایینی هم دارن بخاطر همینه که همراه هر ریکوئستی به سرور ارسال میشن.
• مزیت مهمشون این ـه که توسط Server هم قابل دسترسی هستن در حالی که سشن استوریج و لوکال استوریج فقط تو سمت کلاینت قابل دسترسی ـن.
• برخلاف sessionStorage و localStorage که فقط تو HTML5 ساپورت میشن، کوکی ها HTML4 رو هم ساپورت میکنن.
• کوکی ها Expiry date دارن، به این معنی که برخلاف لوکال استوریج که باید توسط کد یا خود کاربر پاک بشن یا سشن استوریج که محدود به همون سشن هستن، کوکی ها بصورت خودکار وقتی ExpiryDate ـشون رد شد، از بین میرن که میتونه بر اساس کاری که میخواید بکنید نکته‌ی مثبتی باشه.
• میشه با ست کردن فلگ HttpOnly به True کاری کرد که کوکی ها تو سمت کلاینت قابل دسترسی نباشن که باعث افزایش امنیت در مقابل XSS attack هاست.

خب حالا شاید براتون سوال شده باشه که چجوری میتونیم از Cookie ها استفاده کنیم. ایجاد و ویرایش و گرفتن Value و حذف Cookie ها به سرراستی localStorage و sessionStorage نیستن و ممکنه یکم پیچیده بنظر برسن که هرچی بیشتر باهاشون کار کنیم، برامون راحتتر میشن.

• ایجاد Cookie:
  برای ایجاد کوکی میتونیم از کد زیر استفاده کنیم که توش key:userName ـه و value:John Doe

 = &quotusername=John Doe&quot

میتونیم از این طریق بهش expiryDate اضافه کنیم

 = &quotusername=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC&quot

و از طریق پارامتر Path هم میتونیم مشخص کنیم که کوکی به کدوم path تعلق داره، اگه value ای براش ارائه نشه بصورت دیفالت صفحه ای که توش ایجاد شده جاش رو میگیره

 = &quotusername=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/&quot

• دریافت Value ایجاد شده:
  برای اینکار میتونیم از تیکه کد زیر استفاده کنیم، فقط اینو در نظر داشته باشید که این تمامی کوکی هارو برمیگردونه و خودمون باید value ای که میخوایم رو parse کنیم. معمولا هنگام استفاده از این value ها یا یه فانکشن برای parse کردنشون مینویسن یا از third party library هایی استفاده میکنن که سینتکس به مراتب ساده‌تری نسبت به این دارن.

let AllCookies = ;

• حذف کوکی:
  برای اینکار درست مثل ایجاد یه کوکی رفتار میکنیم با این تفاوت که Expiry date رو به یه تاریخ تو گذشته ست میکنیم که بصورت خودکار باعث حذفش بشه، اینو در نظر داشته باشید که بهتره path کوکی رو هم بهش پاس بدیم تا مطمئن بشیم کوکی درست حذف میشه و همینطور بعضی از مرورگرها اجازه حذف کوکی بدون مشخص کردن path رو نمیدن.

 = &quotusername=John Doe; expires=Thu, 18 Dec 2012 12:00:00 UTC; path=/&quot

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