Local Storage و Session Storage: ذخیره داده در مرورگر کاربر

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

در میان این ابزارها، Local Storage و Session Storage به‌عنوان بخش‌هایی از Web Storage API، امکان ذخیره‌سازی داده‌های سبک و غیرحساس را بدون نیاز به ارتباط مداوم با سرور فراهم می‌کنند. این دو قابلیت اگرچه از نظر ساختار مشابه‌اند، اما رفتار، محدوده دسترسی و کاربردهای متفاوتی دارند که آشنایی دقیق با آن‌ها برای طراحی معماری مناسب در سمت کاربر ضروری است.

در این مطلب، ابتدا مفهوم ذخیره‌سازی سمت مرورگر را بررسی می‌کنیم، سپس به معرفی Local Storage و Session Storage می‌پردازیم، تفاوت‌های آن‌ها را تحلیل می‌کنیم و در نهایت با ارائه مثال‌های عملی، راهنمایی لازم برای انتخاب گزینه مناسب در سناریوهای مختلف را ارائه خواهیم داد.

ذخیره‌سازی سمت مرورگر چیست؟

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

در گذشته، کوکی‌ها تنها ابزار موجود برای ذخیره‌سازی داده در مرورگر بودند. با این حال، محدودیت‌هایی مانند ظرفیت کم، ارسال خودکار همراه هر درخواست HTTP و پیچیدگی مدیریت، باعث شد نیاز به یک راهکار ساده‌تر و کارآمدتر احساس شود. در پاسخ به این نیاز، Web Storage API معرفی شد، مجموعه‌ای از قابلیت‌ها که شامل Local Storage و Session Storage است و امکان ذخیره‌سازی داده را با ساختاری ساده‌تر، ظرفیت بیشتر و کنترل دقیق‌تر فراهم می‌کند.

به‌طور کلی، Web Storage برای نگه‌داری داده‌های غیرحساس و مرتبط با تجربه کاربری طراحی شده است. این داده‌ها در سمت کاربر ذخیره می‌شوند، به سرور ارسال نمی‌گردند و تنها از طریق اسکریپت‌های اجراشده در همان دامنه قابل دسترسی هستند. همین ویژگی‌ها باعث شده است Web Storage به یکی از ابزارهای اصلی در توسعه رابط‌های کاربری مدرن تبدیل شود.

Local Storage چیست؟

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

Local Storage برای نگه‌داری داده‌های سبک و غیرحساس طراحی شده است و معمولا در سناریوهایی به کار می‌رود که نیاز به حفظ وضعیت کاربر در بازدیدهای بعدی وجود دارد. این داده‌ها تنها در همان دامنه‌ای که ایجاد شده‌اند قابل دسترسی هستند و به‌صورت خودکار همراه درخواست‌های HTTP به سرور ارسال نمی‌شوند، موضوعی که آن را از کوکی‌ها متمایز می‌کند و باعث کاهش سربار شبکه می‌شود.

ویژگی‌های اصلی Local Storage

• ماندگاری بلندمدت: داده‌ها تا زمان حذف دستی باقی می‌مانند.
• ظرفیت بیشتر نسبت به کوکی‌ها: معمولا بین ۵ تا ۱۰ مگابایت، بسته به مرورگر.
• ساختار ساده: ذخیره‌سازی به‌صورت کلید–مقدار و مبتنی بر رشته.
• محدوده دسترسی: تنها در همان دامنه و پروتکل قابل استفاده است.
• عدم ارسال خودکار به سرور: امنیت و کارایی را افزایش می‌دهد.

مثال ساده از استفاده

در مثال زیر، یک مقدار در Local Storage ذخیره، سپس بازیابی و در نهایت حذف می‌شود:

localStorage.setItem("theme", "dark");
const currentTheme = localStorage.getItem("theme");
localStorage.removeItem("theme");

Local Storage به دلیل سادگی و پایداری، در بسیاری از پروژه‌های فرانت‌اند برای ذخیره تنظیمات کاربری، وضعیت رابط کاربری و داده‌های نیمه‌پایدار مورد استفاده قرار می‌گیرد.

Session Storage چیست؟

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

این ویژگی Session Storage را به گزینه‌ای مناسب برای نگه‌داری داده‌های موقت و مرتبط با همان نشست کاربر تبدیل می‌کند، داده‌هایی که نیازی به ماندگاری طولانی‌مدت ندارند و باید صرفا در طول یک بازدید فعال در دسترس باشند.

ویژگی‌های اصلی Session Storage

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

مثال ساده از استفاده

در مثال زیر، یک مقدار در Session Storage ذخیره، سپس بازیابی و در نهایت حذف می‌شود:

sessionStorage.setItem("step", "2");
const currentStep = sessionStorage.getItem("step");
sessionStorage.removeItem("step");

Session Storage به‌ویژه در سناریوهایی کاربرد دارد که داده باید تنها در طول یک نشست فعال باقی بماند و پس از خروج کاربر یا بستن تب، به‌طور خودکار پاک شود.

مقایسه Local Storage و Session Storage

اگرچه Local Storage و Session Storage هر دو بخشی از Web Storage API هستند و از نظر ساختار ذخیره‌سازی شباهت‌های زیادی دارند، اما رفتار و کاربردهای آن‌ها در عمل تفاوت‌های مهمی ایجاد می‌کند. شناخت این تفاوت‌ها برای انتخاب ابزار مناسب در سناریوهای مختلف ضروری است.

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

در جدول زیر، مهم‌ترین تفاوت‌های این دو نوع ذخیره‌سازی مرورگر ارائه شده است:

تحلیل تفاوت‌ها

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

این تفاوت‌ها باعث می‌شود هر ابزار در جایگاه مناسب خود بهترین عملکرد را ارائه دهد و استفاده صحیح از آن‌ها نقش مهمی در بهبود تجربه کاربری و کارایی برنامه‌های تحت وب دارد.

چه زمانی از کدام استفاده کنیم؟

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

موارد مناسب برای استفاده از Local Storage

Local Storage زمانی انتخاب مناسبی است که داده‌ها باید در بازدیدهای بعدی کاربر نیز در دسترس باقی بمانند. برخی از کاربردهای رایج عبارت‌اند از:

• ذخیره تنظیمات کاربری مانند تم روشن یا تاریک، زبان انتخاب‌شده یا ترجیحات رابط کاربری
• نگه‌داری وضعیت پایدار رابط مانند باز یا بسته بودن منوها
• ذخیره داده‌های نیمه‌پایدار که نیاز به ماندگاری طولانی‌مدت دارند اما حساس نیستند
• کاهش درخواست‌های تکراری به سرور از طریق ذخیره نتایج کش‌شده

موارد مناسب برای استفاده از Session Storage

Session Storage زمانی مناسب است که داده‌ها باید صرفا در طول یک نشست فعال در دسترس باشند و پس از بستن تب یا پنجره حذف شوند. کاربردهای رایج شامل موارد زیر است:

• ذخیره وضعیت موقت فرم‌ها در یک فرآیند چندمرحله‌ای
• نگه‌داری داده‌های واسط که تنها در همان تب مورد نیاز هستند
• جلوگیری از تداخل داده بین چند تب در سناریوهایی که کاربر ممکن است چند نسخه از یک صفحه را هم‌زمان باز کند
• مدیریت داده‌های موقت که نباید در بازدیدهای بعدی باقی بمانند

نکات امنیتی مهم

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

۱. آسیب‌پذیری در برابر حملات XSS

مهم‌ترین تهدید امنیتی مرتبط با Web Storage، حملات Cross-Site Scripting (XSS) است. در صورت وجود هرگونه امکان تزریق اسکریپت مخرب در صفحه، مهاجم می‌تواند به داده‌های ذخیره‌شده در Web Storage دسترسی پیدا کند و آن‌ها را سرقت یا دستکاری کند.
به همین دلیل، ذخیره‌سازی اطلاعات حساس مانند توکن‌های احراز هویت، اطلاعات کاربری یا داده‌های محرمانه در Web Storage به‌شدت نامناسب است.

۲. عدم رمزگذاری داخلی

داده‌های ذخیره‌شده در Web Storage به‌صورت پیش‌فرض رمزگذاری نمی‌شوند و هر کاربری که به دستگاه یا مرورگر دسترسی داشته باشد، می‌تواند آن‌ها را مشاهده کند. این موضوع اهمیت استفاده از Web Storage صرفا برای داده‌های عمومی و غیرحساس را دوچندان می‌کند.

۳. عدم کنترل سمت سرور

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

۴. امکان دسترسی اسکریپت‌های همان دامنه

تمام اسکریپت‌هایی که در همان دامنه اجرا می‌شوند، به داده‌های Web Storage دسترسی دارند. بنابراین، استفاده از کتابخانه‌ها یا اسکریپت‌های شخص ثالث بدون بررسی امنیتی می‌تواند خطر دسترسی ناخواسته به داده‌ها را افزایش دهد.

۵. توصیه‌های امنیتی

برای کاهش ریسک‌های امنیتی، رعایت نکات زیر ضروری است:

• جلوگیری از هرگونه تزریق اسکریپت از طریق اعتبارسنجی و پاک‌سازی ورودی‌ها
• عدم ذخیره‌سازی داده‌های حساس در Web Storage
• استفاده از سیاست‌های امنیتی مانند Content Security Policy (CSP)
• پاک‌سازی دوره‌ای داده‌های غیرضروری
• محدود کردن استفاده از اسکریپت‌های شخص ثالث یا بارگذاری آن‌ها از منابع معتبر

بهترین شیوه‌ها (Best Practices)

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

۱. نام‌گذاری مناسب کلیدها

استفاده از نام‌های واضح، یکتا و مبتنی بر ساختار پروژه باعث می‌شود مدیریت داده‌ها در Web Storage ساده‌تر و قابل‌ردیابی‌تر باشد.
به‌عنوان نمونه، استفاده از الگوهای نام‌گذاری مانند app_theme یا user_preferences به‌جای نام‌های عمومی، خوانایی و نگه‌داری کد را بهبود می‌دهد.

۲. مدیریت نسخه‌بندی داده

در پروژه‌هایی که داده‌های ذخیره‌شده ممکن است در نسخه‌های جدید برنامه تغییر کنند، استفاده از نسخه‌بندی برای کلیدها یا ساختار داده ضروری است. این کار از ناسازگاری داده‌ها جلوگیری می‌کند و امکان پاک‌سازی یا به‌روزرسانی داده‌های قدیمی را فراهم می‌سازد.

۳. پاک‌سازی داده‌های غیرضروری

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

۴. استفاده از try/catch برای مدیریت خطا

در برخی مرورگرها یا شرایط خاص (مانند پر شدن ظرفیت ذخیره‌سازی)، عملیات نوشتن در Web Storage ممکن است با خطا مواجه شود. استفاده از بلوک‌های try/catch به جلوگیری از توقف اجرای برنامه کمک می‌کند:

try {
  localStorage.setItem("settings", JSON.stringify(config));
} catch (error) {
  console.error("Storage failed:", error);
}

۵. ذخیره‌سازی داده‌های سبک و غیرحساس

Web Storage برای نگه‌داری داده‌های کوچک و غیرحساس طراحی شده است. ذخیره‌سازی داده‌های حجیم یا اطلاعات حساس می‌تواند مشکلات امنیتی و عملکردی ایجاد کند. در چنین مواردی، استفاده از راهکارهای مناسب‌تر مانند IndexedDB یا ذخیره‌سازی سمت سرور توصیه می‌شود.

۶. جلوگیری از وابستگی بیش از حد

اگرچه Web Storage ابزار قدرتمندی است، اما نباید به‌عنوان تنها منبع داده در برنامه استفاده شود. در صورت پاک‌سازی داده‌ها توسط کاربر یا مرورگر، برنامه باید توانایی بازیابی یا بازسازی داده‌های ضروری را داشته باشد.

جمع‌بندی

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

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