وب استوریج ها: Local Storage, Session Storage And Cookies

پروتکل HTTP یکی از مهم‌ترین پروتکل‌ها برای برقراری ارتباط بین کلاینت (کاربر) و سرور است.
اما یکی از معایب این پروتکل این است که "stateless" یا بدون‌حالت است؛ یعنی اطلاعات مربوط به درخواست‌های قبلی را ذخیره نمی‌کند و همیشه هر درخواست را مستقل می‌بیند.

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

در این مقاله، با این سه روش آشنا می‌شویم و بررسی می‌کنیم چرا دانستن آن‌ها برای یک توسعه‌دهنده وب ضروری است.

1- لوکال استوریج Local Storage

Local Storage به وب‌سایت‌ها اجازه می‌دهد تا داده‌ها را به صورت جفت کلید-مقدار (key-value) به صورت دائمی در مرورگر کاربر ذخیره کنند — حتی بعد از بسته شدن و باز شدن مجدد مرورگر.

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

پس Local Storage برای ذخیره داده‌هایی مفید است که کاربر ممکن است بعداً به آن‌ها نیاز داشته باشد، مانند داده‌هایی که در حالت آفلاین استفاده می‌شوند.

2- سشن استوریج Session Storage

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

به دلیل محدود بودن دسترسی، این روش امن‌تر در نظر گرفته می‌شود و همچنین به دلیل کاهش تبادل داده بین سرور و کلاینت، باعث عملکرد بهتر و سریع‌تر سایت می‌شود.

3- کوکی‌‍ ها Cookies

کوکی‌ها گزینه‌ی مناسبی برای ذخیره داده‌هایی هستند که نباید برای مدت طولانی نگه‌داری شوند، مانند session ID و توکن احراز هویت.
در کوکی‌ها می‌توان زمان انقضا تعیین کرد تا داده‌ها پس از آن به‌طور خودکار حذف شوند.

همچنین، حجم داده‌ای که در کوکی‌ها می‌توان ذخیره کرد نسبت به دو روش دیگر (Local Storage و Session Storage) بسیار کمتر است (4 کیلوبایت).

نکته جالب راجب کوکی اینه که کوکی هایی که شما ذخیره می‌کنید به صورت اتومات با هر درخواست http به سمت سرور ارسال میشود. یکی از دلایلی که بیشتر از 4 کیلوبایت داده نمیتوان در کوکی ذخیره کرد این است که باعث کندی درخواست های http نشود.

مقایسه این سه روش

کوکی‌ها، LocalStorage و SessionStorage همگی:

• مکانیزم‌های ذخیره‌سازی در سمت کاربر (کلاینت) هستند. یعنی در سمت مرورگر میتوان این مقادیر را خواند و تغییر داد.

• بر پایه‌ی کلید-مقدار (Key-Value) کار می‌کنند.

• تنها قادر به ذخیره مقادیر به‌صورت رشته (String) هستند. بنابراین برای ذخیره‌ی اشیاء (Object)، باید ابتدا آن‌ها را به رشته تبدیل کرد (مثلاً با استفاده از JSON.stringify()).

جدول زیر مقایسه این سه روش هست و دید خیلی خوبی بهتون میده:

یک سشن سمت سرور (server-side session) هم داریم که در عنوان مقاله ذکر نشده ولی بد نیست یه اشاره ای بهش داشته باشیم.
گاهی اوقات بسته به معماری پروژه برای امنیت و کنترل بیشتر اطلاعات کاربر و یا اطلاعاتی درمورد رفتار و یک سری تنظیمات کاربر، این اطلاعات در سشن سمت سرور ذخیره میشود، مثلا در فریم ورک express.js با استفاده از پکیج express-session میتوان در سمت سرور سشن ساخت و بدون محدودیت حجم اطلاعاتی رو ذخیره کرد. در ادامه این مقاله چند تا از کاربرد های سشن سمت سرور در ادامه سه روش دیگر ذکر خواهد شد.

چند مثال از کاربرد های عملی هر کدام از این روش ها

1. کاربردهای واقعی sessionStorage

sessionStorage برای ذخیره داده‌های موقت در طول یک نشست (session) در یک تب خاص مرورگر استفاده می‌شود. داده‌ها با بستن تب پاک می‌شوند.

• فرم‌های چندمرحله‌ای:

  • ذخیره موقت داده‌های واردشده توسط کاربر در فرم‌های چندمرحله‌ای (مثل فرم ثبت‌نام یا نظرسنجی) تا کاربر در همان تب مراحل را تکمیل کند.

  • مثال: در یک فرم استخدام آنلاین، اطلاعات مرحله اول (مثل نام و ایمیل) در sessionStorage ذخیره می‌شود تا در مراحل بعدی بدون نیاز به ارسال به سرور حفظ شوند.

• حفظ حالت موقت در برنامه‌های تک‌صفحه‌ای (SPA):

  • ذخیره حالت رابط کاربری (مثل موقعیت اسکرول یا تب فعال) در یک تب خاص.

  • مثال: در یک داشبورد SPA، اگر کاربر در تب فعلی روی یک تب خاص (مثل "گزارش‌ها") کلیک کند، انتخاب او در sessionStorage ذخیره می‌شود تا با رفرش صفحه حفظ شود.

• مدیریت داده‌های موقت در بازی‌های وب:

  • ذخیره وضعیت موقت بازی (مثل امتیاز فعلی یا مرحله) در طول یک نشست بازی.

  • مثال: در یک بازی آنلاین ساده، امتیاز کاربر در sessionStorage ذخیره می‌شود تا با بستن تب بازی ریست شود.

• کش کردن داده‌های موقت API:

  • ذخیره پاسخ‌های API که فقط در طول یک نشست نیاز هستند (مثل نتایج جستجو).

  • مثال: در یک اپلیکیشن جستجوی محصولات، نتایج جستجو در sessionStorage ذخیره می‌شوند تا از درخواست‌های مکرر به سرور جلوگیری شود.

• و هرگونه تنظیماتی که نیاز باشد برای یه پنجره یا تب خاص به صورت موقت ذخیره کنیم.

2. کاربردهای واقعی localStorage

localStorage برای ذخیره داده‌های ماندگار در مرورگر استفاده می‌شود که تا پاک شدن دستی باقی می‌مانند و در تمام تب‌های یک دامنه قابل دسترسی هستند.

• ذخیره تنظیمات کاربر:

  • ذخیره تنظیمات دائمی کاربر مثل تم (تاریک/روشن)، زبان سایت، یا ترجیحات نمایش.

  • مثال: در یک وب‌سایت، کاربر تم تاریک را انتخاب می‌کند، و این انتخاب در localStorage ذخیره می‌شود تا در بازدیدهای بعدی اعمال شود.

• کش کردن داده‌های آفلاین:

  • ذخیره داده‌ها برای استفاده در حالت آفلاین، مثل محتوای صفحات یا تنظیمات برنامه.

  • مثال: در یک اپلیکیشن PWA (Progressive Web App)، مقالات یا تصاویر در localStorage ذخیره می‌شوند تا در حالت آفلاین قابل دسترسی باشند.

• مدیریت توکن‌های غیرحساس:

  • ذخیره توکن‌های موقت یا غیرحساس (مثل توکن‌های دسترسی به APIهای عمومی).

  • مثال: در یک اپلیکیشن نمایش آب‌وهوا، توکن API در localStorage ذخیره می‌شود تا در درخواست‌های بعدی استفاده شود.

• ذخیره حالت برنامه‌های وب:

  • حفظ حالت‌های پیچیده در برنامه‌های تک‌صفحه‌ای (مثل فیلترهای اعمال‌شده در یک جدول).

  • مثال: در یک داشبورد تحلیلی، فیلترهای انتخاب‌شده توسط کاربر (مثل بازه زمانی) در localStorage ذخیره می‌شوند.

• مدیریت سبد خرید آفلاین:

  • ذخیره آیتم‌های سبد خرید در مرورگر تا زمانی که کاربر وارد حساب خود شود.

  • مثال: در یک فروشگاه آنلاین، کاربر آیتم‌هایی را به سبد اضافه می‌کند، و این آیتم‌ها در localStorage ذخیره می‌شوند تا در بازدید بعدی حفظ شوند.

3. کاربردهای واقعی Cookies

Cookies برای ذخیره داده‌های کوچک که باید با هر درخواست HTTP به سرور ارسال شوند استفاده می‌شوند. آنها معمولاً برای ردیابی یا احراز هویت به کار می‌روند.

• احراز هویت (Authentication):

  • ذخیره توکن‌های احراز هویت (مثل JWT) با تنظیمات HttpOnly و Secure برای امنیت.

  • مثال: پس از لاگین در یک وب‌سایت، یک کوکی حاوی JWT تنظیم می‌شود که با هر درخواست به سرور ارسال می‌شود تا هویت کاربر تأیید شود.

• ردیابی کاربر:

  • ردیابی رفتار کاربر برای اهداف تبلیغاتی یا آنالیتیکس.

  • مثال: یک وب‌سایت تبلیغاتی از کوکی‌ها برای ذخیره شناسه کاربر و نمایش تبلیغات هدفمند استفاده می‌کند.

• ذخیره تنظیمات کوچک:

  • ذخیره تنظیمات ساده مثل زبان سایت یا پذیرش سیاست کوکی‌ها.

  • مثال: وب‌سایتی پس از پذیرش سیاست کوکی‌ها توسط کاربر، یک کوکی تنظیم می‌کند تا اعلان دوباره نمایش داده نشود.

• مدیریت سشن‌های کوتاه‌مدت:

  • استفاده از کوکی‌های جلسه‌ای (session cookies) که با بستن مرورگر پاک می‌شوند.

  • مثال: در یک وب‌سایت بانکی، کوکی‌های جلسه‌ای برای حفظ حالت لاگین در طول یک بازدید استفاده می‌شوند.

• شخصی‌سازی محتوا:

  • ذخیره اطلاعات برای نمایش محتوای شخصی‌سازی‌شده (مثل محصولات پیشنهادی).

  • مثال: یک فروشگاه آنلاین از کوکی‌ها برای ذخیره دسته‌بندی‌های اخیراً بازدیدشده توسط کاربر استفاده می‌کند تا پیشنهادات مرتبط نمایش دهد.

4. کاربردهای واقعی Session سمت سرور

Session سمت سرور برای ذخیره داده‌های حساس یا مدیریت حالت کاربر در سرور استفاده می‌شود، و کلاینت فقط یک Session ID دریافت می‌کند.

• احراز هویت و مدیریت کاربران:

  • ذخیره اطلاعات کاربر (مثل ID، نقش، یا نام کاربری) پس از لاگین برای تأیید هویت در درخواست‌های بعدی.

  • مثال: در یک پلتفرم مدیریت محتوا (مثل وردپرس)، اطلاعات کاربر (مثل نقش ادمین) در سشن سمت سرور ذخیره می‌شود.

• سبد خرید در فروشگاه‌های آنلاین:

  • ذخیره آیتم‌های سبد خرید کاربر برای جلوگیری از دستکاری در سمت کلاینت.

  • مثال: در یک وب‌سایت فروشگاهی، آیتم‌های سبد خرید در سشن ذخیره می‌شوند تا کاربر پس از لاگین یا در بازدید بعدی آنها را ببیند.

• فرم‌های چندمرحله‌ای حساس:

  • ذخیره داده‌های فرم‌های حساس (مثل اطلاعات پرداخت) در طول مراحل مختلف.

  • مثال: در یک وب‌سایت رزرو بلیط، اطلاعات انتخاب پرواز و پرداخت در سشن ذخیره می‌شود تا در مراحل بعدی استفاده شود.

• مدیریت دسترسی‌های موقت:

  • کنترل دسترسی به منابع خاص (مثل صفحات محافظت‌شده) در طول یک جلسه.

  • مثال: در یک سیستم مدیریت پروژه، دسترسی کاربر به پروژه‌های خاص در سشن ذخیره می‌شود تا فقط در طول جلسه معتبر باشد.

• پیگیری رفتار کاربر در سرور:

  • ثبت و تحلیل رفتار کاربر (مثل تعداد کلیک‌ها یا صفحات بازدیدشده) برای آنالیتیکس.

  • مثال: یک وب‌سایت آموزشی تعداد ویدیوهای مشاهده‌شده توسط کاربر در یک جلسه را در سشن ذخیره می‌کند تا گزارش دهد.

• مدیریت توکن‌های Refresh:

  • ذخیره توکن‌های Refresh برای تمدید JWT در سرور.

  • مثال: در یک اپلیکیشن امن، توکن Refresh در سشن سمت سرور ذخیره می‌شود تا از سرقت آن در کلاینت جلوگیری شود.

  اگه دقت کنید اکثر کاربرد های سشن سمت سرور در روش های قبل هم بود ، اینکه مثلا اطلاعات احراز هویت کلاینت در سمت مرورگر ذخیره بشود یا با استفاده از سشن در سمت سرور بستگی به معماری پروژه دارد.

حرف پایانی

در پایان، درک این موضوع که چه زمانی باید از کوکی‌ها، Local Storage یا Session Storage و یا حتی سشن سمت سرور استفاده کرد، بستگی به نوع داده‌ای دارد که با آن سروکار دارید و اینکه این داده را تا چه مدت نیاز دارید.
هر کدام از این ابزارها برای توسعه‌دهندگان وب ارزشمند هستند، و دانستن زمان و روش مناسب استفاده از آن‌ها می‌تواند وب‌سایت شما را کارآمدتر و کاربرپسندتر کند.

پس، دفعه بعد که در حال ساخت یک وب‌اپلیکیشن هستید، با دقت بررسی کنید کدام روش ذخیره‌سازی بیشتر با نیازتان سازگار است!