مقایسه Cookies با Local Storage و Session Storage؛ تفاوت در چیست؟

در این نوشته قصد داریم ۳ روش ذخیره‌سازی را بررسی کنیم:‌

• ذخیره‌سازی از طریق Cookies
• ذخیره‌سازی از طریق Local Storage
• ذخیره‌سازی از طریق Session Storage

نمونه‌هایی را مورد بررسی قرار می‌دهیم و تفاوت‌های آن‌ها را بررسی خواهیم کرد.

کوکی‌ها (Cookies)

کوکی‌ها (Cookies) قطعات کوچکی از داده‌ها هستند که در سمت کلاینت (در کامپیوتر کاربر) ذخیره می‌شوند، معمولاً به صورت متن ساده. کوکی (Cookie) معمولاً با هر درخواست به سرور ارسال می‌شود تا سرور بتواند کاربر را شناسایی کرده و محتوای شخصی‌سازی شده را ارائه دهد. کوکی‌ها (Cookies) معمولاً برای احراز هویت و ذخیره تنظیمات کاربری استفاده می‌شوند.

ذخیره محلی (Local Storage) مشابه کوکی‌ها (Cookies) است، اما داده‌ها را به صورت ساختارمند، معمولاً به صورت جفت کلید-مقدار (Key-Value) ذخیره می‌کند. این داده‌ها در کامپیوتر سمت کلاینت ذخیره می‌شوند و تا زمانی که به صورت دستی حذف نشوند، در آنجا باقی می‌مانند. ذخیره محلی (Local Storage) عموماً برای ذخیره داده‌هایی استفاده می‌شود که نیاز دارند پس از بسته شدن مرورگر همچنان باقی بمانند.

ذخیره جلسه (Session Storage) شبیه به ذخیره محلی است، اما فقط برای جلسه فعلی (Current Session) داده‌ها را ذخیره می‌کند و پس از بسته شدن مرورگر حذف می‌شوند. ذخیره جلسه (Session Storage) برای ذخیره داده‌های موقت استفاده می‌شود که تنها در حالتی که کاربر در وبسایت حضور دارد، نیاز است.

یک مثال از Cookie

درباره سیستم ورود به یک سایت فکر کنید. وقتی کاربر برای اولین بار وارد سایت می‌شود، سرور می‌تواند یک کوکی (Cookie) ایجاد کند تا اطلاعات ورود آن کاربر را به خاطر بسپارد. کوکی (Cookie) ممکن است شامل اطلاعاتی مانند نام کاربری و یک شناسه جلسه یکتا (Session ID) باشد.

Name: login_cookie
Value: {username: &quotexample_user&quot, session_id: &quotabc123&quot} 
Expires: 30 days from now

وقتی کاربر دوباره به وبسایت سر می‌زند، مرورگر وب آن کوکی (Cookie) را با هر درخواست به سرور ارسال می‌کند. سپس سرور می‌تواند از اطلاعات موجود در کوکی (Cookie) استفاده کند تا کاربر را شناسایی کرده و تجربه‌ی شخصی شده را در سایت برایش ارائه دهد (مانند نمایش صفحه حساب کاربری به جای صفحه ورود).

مهم است به‌خاطر داشته باشیم که کوکی‌ها (Cookies) می‌توانند علاوه بر اطلاعات ورود، برای اهداف دیگری نیز استفاده شوند، مانند نمایش تبلیغات شخصی‌سازی شده. با این حال، کوکی‌ها اغلب با مسائل حریم خصوصی مواجه هستند، زیرا می‌توانند بدون رضایت صریح کاربر، اطلاعات کاربر را جمع‌آوری و به اشتراک بگذارند.

یک مثال از Local Storage

به‌عنوان یک نمونه، فرض کنید یک وبسایت دارید که به کاربران امکان می‌دهد یادداشتی را ایجاد و ذخیره کنند. وقتی کاربر یک یادداشت را ذخیره می‌کند، شما می‌توانید آن را در فضای ذخیره‌سازی محلی (local storage) ذخیره کنید تا حتی اگر کاربر مرورگر خود را ببندد، یادداشت حفظ شود.

// To save a note: 
const note = &quotThis is my note" 
localStorage.setItem(&quotnote1&quot, note);  
// To retrieve the note: 
const retrievedNote = localStorage.getItem(&quotnote1&quot); console.log(retrievedNote); // Outputs: &quotThis is my note&quot

در این مثال، از متد setItem برای ذخیره یک یادداشت با کلید "note1" و مقدار "This is my note" در فضای ذخیره‌ محلی (Local Storage) استفاده می‌شود. از متد getItem برای بازیابی یادداشت با کلید "note1" از فضای ذخیره‌ محلی (Local Storage) و چاپ آن در کنسول استفاده می‌شود.

توجه داشته باشید که فضای ذخیره‌ محلی (Local Storage) محدود به ذخیره سازی رشته‌ها است. بنابراین، اگر نیاز دارید انواع داده‌های پیچیده مانند شیء‌ها یا آرایه‌ها را ذخیره کنید، قبل از ذخیره آنها در فضای ذخیره‌ محلی، باید از JSON.stringify استفاده کنید تا آنها را به رشته تبدیل کنید و هنگام بازیابی آنها از فضای ذخیره‌ محلی، از JSON.parse استفاده کنید تا آنها را به شکل اصلی خود بازیابی کنید.

یک مثال از Session Storage

فرض کنید شما یک وبسایت دارید که به کاربران اجازه می‌دهد محصولات را به سبد خرید خود اضافه و ذخیره کنند. وقتی کاربر یک مورد را به سبد خرید خود اضافه می‌کند، شما می‌توانید آن را در فضای ذخیره‌ سشن (Session Storage) ذخیره کنید تا تنها برای مدت سشن کاربر در وبسایت ماندگار باشد.

// To save an item to the cart: 
const item = { name: &quotT-shirt&quot, price: 20 }; sessionStorage.setItem(&quotcartItem1&quot, JSON.stringify(item));  
// To retrieve the item from the cart: 
const retrievedItem = JSON.parse(sessionStorage.getItem(&quotcartItem1&quot)); console.log(retrievedItem); // Outputs: { name: &quotT-shirt&quot, price: 20 }

در این مثال، از متد setItem برای ذخیره یک مورد با کلید "cartItem1" و مقدار { name: "T-shirt", price: 20 } در فضای ذخیره‌ سشن (Session Storage) استفاده می‌شود. از متد getItem برای بازیابی آیتم با کلید "cartItem1" از فضای ذخیره‌ سشن (Session Storage) استفاده می‌شود و از متد JSON.parse برای تبدیل آیتم از یک رشته به شیء استفاده می‌شود.

توجه کنید که فضای ذخیره‌ سشن (Session Storage) به طرز مشابهی با فضای ذخیره‌ محلی (Local Storage) عمل می‌کند، اما تفاوت اصلی آن این است که فضای ذخیره‌ سشن (Session Storage) هنگامی که کاربر مرورگر خود را ببندد پاک می‌شود، در حالی که فضای ذخیره‌ محلی (Local Storage) حتی پس از بسته شدن مرورگر همچنان باقی می‌ماند.

تفاوت‌های کلیدی

• کوکی‌ها (Cookies) می‌توانند پس از گذشت زمانی مشخص به صورت خودکار منقضی شوند یا به صورت دستی حذف شوند، در حالی که فضاهای ذخیره‌ محلی و سشن (Local Storage - Session Storage) فقط توسط کاربر یا از طریق اجرای یک اسکریپت پاک شوند.
• کوکی‌ها (Cookies) با هر درخواست به سرور ارسال می‌شوند، در حالی که فضاهای ذخیره‌ محلی و سشن (Local Storage - Session Storage) به صورت خودکار به سرور ارسال نمی‌شوند.
• حداکثر اندازه کوکی‌ها (Cookies) ۴ کیلوبایت است، در حالی که فضاهای ذخیره‌ محلی و سشن (Local Storage - Session Storage) حجم بزرگتری دارند (معمولاً حدود ۵ تا ۱۰ مگابایت).
• فضاهای ذخیره‌ محلی و سشن (Local Storage - Session Storage) فقط در دامنه مشابه قابل دسترسی هستند، در حالی که کوکی‌ها (Cookies) می‌توانند توسط دامنه‌های دیگری که کاربر بازدید می‌کند، قابل دسترسی باشند.
• بطور کلی، کوکی‌ها (Cookies)، فضای ذخیره‌ محلی و سشن (Local Storage - Session Storage)، همگی فناوری‌های ذخیره‌سازی وب هستند که در توسعه وب سمت کاربر استفاده می‌شوند، اما ویژگی‌ها و استفاده‌های مختلفی دارند. به طور کلی، کوکی‌ها (Cookies) برای ذخیره کمیت‌های کوچکی از داده که نیاز است با هر درخواست ارسال شوند، مناسب‌تر هستند، در حالی که فضای ذخیره‌ محلی و سشن (Local Storage - Session Storage) برای ذخیره کمیت‌های بزرگتری از داده که نیازی به ارسال به سرور ندارند، بهتر عمل می‌کنند.

نتیجه

به طور کلی، کوکی‌ها (Cookies)، فضای ذخیره‌ محلی و سشن (Local Storage - Session Storage)، روش‌هایی برای ذخیره داده در سمت کاربر در برنامه‌های وب هستند، اما تفاوت‌های کلیدی بین آن‌ها وجود دارد.

کوکی‌ها (Cookies) فایل‌های متنی کوچکی هستند که توسط سرور وب بر روی دستگاه کاربر ذخیره می‌شوند و برای ذخیره کمیت‌های کوچکی از داده که نیاز است با هر درخواست ارسال شوند، مناسب‌تر هستند.

فضای ذخیره‌ محلی و سشن (Local Storage - Session Storage) هر دو بخشی از وب API ذخیره‌سازی هستند و به برنامه‌های وب اجازه می‌دهند داده را به صورت محلی در مرورگر کاربر ذخیره کنند. فضای ذخیره محلی ذخیره‌سازی (Local Storage) پایدار است، به این معنی که داده حتی پس از بسته شدن و دوباره باز شدن مرورگر نیز در دسترس خواهد بود، در حالی که فضای ذخیره‌ سشن (Session Storage) ذخیره‌سازی موقتی است، به این معنی که داده تنها در طول سشن کاربر در وبسایت در دسترس است.

فضای ذخیره‌ محلی و سشن (Local Storage - Session Storage) برای ذخیره کمیت‌های بزرگتری از داده که نیازی به ارسال به سرور ندارند، مناسب‌تر هستند. به طور کلی، انتخاب بین کوکی‌ها (Cookies)، فضای ذخیره‌ محلی و سشن (Local Storage - Session Storage) بستگی به نیازهای خاص برنامه وب و داده‌هایی که باید ذخیره شوند دارد.

شروع هر کاری سخت است، اما به یاد داشته باشید هر روز کمی آسان‌تر خواهد شد :)

بازنشر و نظر شما با ارزش و باعث دلگرمی است ❤︎
اگر این نوشته را دوست داشتید می‌توانید برایم یک قهوه بخرید :)