با اگاهی از تفاوت لوکال استوریج (Local storage) با سشن استوریج و کوکی (Cookie)، میتوانید تصمیمات آگاهانهتری در زمینه ذخیرهسازی دادههای مرورگر بگیرید که نه تنها به بهبود تجربه کاربر کمک میکند بلکه امنیت و کارایی وبسایت شما را نیز بهبود میبخشد.
یکی از موضوعات مهمی که هنگام ایونت ترکینگ در آنالیتیکس ۴ با استفاده از گوگل تگ کنیجر اهمیت زیادی پیدا میکندُ مدل ذخیره سازی اطلاعات مربو ط به کاربران سایت است. شاید شما هم بارها با پاپ آپ هایی حاوی پیغام زیر در وبسایتهای مختلف مواجه شدهاید:
“این وبسایت برای ذخیرهسازی اطلاعات شما از کوکیها استفاده میکند.”
بدون شک، استفاده از کوکیها برای ذخیرهسازی اطلاعات مربوط به سشن های کاربران به قدری رایج است که یادگیری دیگر روش های ذخیره سازی اطلاعات کاربران برای شما اهمیت نداشته باشد. با این حال، به دلیل ظرفیت و کاربردهای محدودی که کوکی ها دارند، همیشه راه حل مناسبی برای ذخیره سازی اطلاعات کاربران نیستند. برای مقابله با این محدودیتها، مرورگرهای مدرن با مکانیزمهای ذخیرهسازی دیگری مانند لوکال استوریج و سشن استوریج پدید آمدهاند.
در این پست، من درباره این مکانیزمهای ذخیرهسازی صحبت خواهم کرد. شما درک خواهید کرد که چگونه لوکال استوریج، سشن استوریج و کوکیها با یکدیگر مقایسه میشوند و کاربردهای رایج هرکدام را کشف خواهید کرد. در پایان این پست، شما دقیقاً خواهید دانست که چه زمانی از کدامیک استفاده کنید.
بررسی مختصری از تاریخچه کوکی
در ادامه این مقاله به بررسی تاریخچه کوکیها و تفاوت آنها با لوکال استوریج و سشن استوریج پرداختهایم.
در گذشته، وبسایتها از پروتکل HTTP استفاده میکردند که امکان ذخیره اطلاعات مرتبط با کاربر مانند شناسه سشن کاربر، نام کاربر و غیره را در اختیار دیجیتال مارکترها قرار نمیداد.
با پیشرفت و محبوبیت بیشتر وب، وبسایتها شروع به ذخیرهسازی اطلاعات مرتبط با کاربر در خود مرورگر کردند. این فرایند به آنها کمک کرد تا درک بهتری از نحوه تعامل کاربران با سایت خود را داشته باشند و به این ترتیب تجربهای شخصیسازی شده به کاربر ارائه دهند.
اینجا بود که کوکیها به وجود آمدند. کوکی ها مکانیزمی برای ذخیره اطلاعات سبک سمت کلاینت یا سرور به صورت جفتهای کلید-مقدار در مرورگر ارائه دادند. این کوکی ها دارای یک تاریخ انقضا بودند که باعث میشد به طور خودکار توسط مرورگر حذف شوند.
علاوه بر این، هم مرورگر و هم سرور میتوانستند کوکیها را در مرورگر کاربر تنظیم کرده و بازیابی کنند. از آن گذشته، این کوکیها به صورت خودکار همراه با هر درخواست HTTP ارسال میشدند. این شرایط برای وبسایتهای سرور ساید، زمانی که برنامههای تک صفحهای چندان مرسوم نبودند، بسیار کاربردی بود. زیرا صاحبان وب سایت میتوانستند به راحتی اطلاعات کاربر را با هر درخواست HTTP که کاربر ایجاد میکرد، تشخیص دهند.
نیاز به افزایش ظرفیت ذخیرهسازی در مرورگر
در زمانهای قبل از HTML5، وبسایتها برای ذخیرهسازی اطلاعات کاربر در سمت کلاینت (کاربر)، بیشتر به کوکیها متکی بودند. این کوکیها محدودیتهایی از نظر حجم و امنیت داشتند. با معرفی HTML5، APIهای جدیدی برای ذخیرهسازی اطلاعات در مرورگر کاربران ارائه شد که این محدودیتها را به نحو قابل توجهی کاهش داد.
این APIهای ذخیرهسازی جدید در دو نوع اصلی عرضه شدند: Local Storage و Session Storage. هر دوی اینها بخشی از آبجکت Window در جاوا اسکریپت هستند، به این معنی است که میتوانند به طور سراسری در کدهای جاوا اسکریپت که در یک صفحه وب اجرا میشوند، دسترسی پیدا کنند.
- Local Storage: امکان ذخیرهسازی دادهها را بدون انقضا فراهم میکند، به این معنی که دادهها حتی پس از بستن مرورگر هم باقی میمانند.
- Session Storage: امکان ذخیرهسازی دادهها را به صورت موقتی فراهم میکند، به این معنی که دادهها با بسته شدن تب مرورگر پاک میشوند.
نکته کلیدی این است که هر دوی این روشها اجازه میدهند دادهها با حجم بیشتری نسبت به کوکیها ذخیره شوند و تنها توسط جاوا اسکریپتهایی که در سمت کاربر اجرا میشوند قابل دسترسی هستند. این ویژگی امکان پیشرفتهتری برای توسعهدهندگان فراهم میآورد تا بتوانند تجربه کاربری بهتری را ارائه دهند، به ویژه در زمینههایی مانند بهبود سرعت بارگذاری صفحه و ایجاد برنامههای کاربردی وب آفلاین.
همه چیز در مورد سشن استوریج در مرورگر
ابتدا نگاهی به جایگاه سشن استوریج در مرورگر میاندازیم:
- ابزارهای توسعهدهنده (Developer Tools) را در مرورگر باز کنید و به زبانه “Application” بروید.
- در بخش ذخیرهسازی (Storage)، بخشی با نام “Session Storage” را خواهید یافت.
- با کلیک بر روی آن، میتوانید محتوای سشن استوریج مربوط به آن وبسایت را مشاهده کنید.
حال، ویژگیهای سشن استوریج مرورگر را بررسی میکنیم.
ظرفیت ذخیرهسازی سشن استوریج
سشن استوریج بین 5 تا 10 مگابایت داده را در خود ذخیره میکند. مقدار دقیق ظرفیت ذخیرهسازی با توجه به هر مرورگر متفاوت است، اما این تفاوت چشمگیر نیست!
مدت زمان نگهداری داده توسط سشن استوریج
همانطور که از نام آن پیداست، سشن استوریج تنها تا زمانی که تب مرورگر باز است، دادهها را حفظ میکند. این به معنای آن است که هر بار که یک تب یا پنجره مرورگر جدیدی باز میکنید، یک سشن استوریج جدید ایجاد میشود. پس، هر دادهای که در سشن استوریج ذخیره میکنید، به طور خودکار هنگام بستن آن تب/پنجره حذف میشود.
نحوه استفاده از سشن استوریج
برای دسترسی به سشن استوریج از دستورات زیر در بخش کنسول استفاده کنید:
window.sessionStorage
افزودن داده به سشن استوریج
بیایید با استفاده از تابع setItem موجود در شیء sessionStorage، یک جفت کلید-مقدار به سشن استوریج اضافه کنیم:
sessionStorage.setItem(“id”, “123”)
با این کار یک داده جدید در سشن استوریج با کلید id و مقدار 123 قرار میگیرد. اگر بازهم sessionStorage را فراخوانی کنید، مقدار زیر را دریافت خواهید کرد که حاوی اطلاعاتی است که اخیرا به سشن استوریج اضافه کردید:
Storage {id: ‘123’, length: 1}