LocalStorage

در دنیای وب‌سایت‌ها، همیشه نیاز هست برخی اطلاعات را در مرورگر کاربر ذخیره کنیم، مثلاً وقتی کاربر تم تاریک یا روشن سایت را انتخاب می‌کند یا می‌خواهیم مطمئن شویم وقتی او باز به سایت برمی‌گردد، همان حالت دلخواهش را می‌بیند. اینجاست که LocalStorage وارد بازی می‌شود. LocalStorage محلی است که می‌توان در آن داده‌ها را به‌صورت کلید و مقدار ذخیره کرد و مهم‌ترین ویژگی‌اش این است که داده‌ها حتی پس از بستن مرورگر هم باقی می‌مانند. یعنی اگر کاربر فردا دوباره به سایت تو سر بزند، همچنان می‌توانی بفهمی که او چه انتخاب‌هایی کرده است. اما LocalStorage محدودیت‌هایی دارد که باید بدانی. مثلاً مرورگرها حجم مشخصی را برای ذخیره داده‌ها اختصاص می‌دهند که معمولاً بین پنج تا ده مگابایت است و اگر بیشتر از این مقدار بخواهی داده ذخیره کنی، خطا دریافت خواهی کرد یا ذخیره‌سازی انجام نمی‌شود. همچنین هر چیزی که در LocalStorage می‌نویسی، به‌صورت متن ساده ذخیره می‌شود و امنیت چندانی ندارد. به همین دلیل نباید اطلاعات حساس مثل رمز عبور یا توکن‌های امنیتی را در آن قرار دهی. جالب است بدانی که اگر تغییری در LocalStorage یک تب اتفاق بیفتد، تب‌های دیگر همان سایت از طریق یک رویداد خاص به نام storage از این تغییر مطلع می‌شوند. این موضوع باعث می‌شود بتوانی رفتار سایت را در چند تب هماهنگ نگه داری، مثلاً اگر کاربر در یک تب از حساب کاربری‌اش خارج شود، تب‌های دیگر هم متوجه شوند.

SessionStorage

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

محدودیت حافظه

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

امنیت در ذخیره‌سازی

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

رویداد storage

از جذاب‌ترین ویژگی‌های LocalStorage رویدادی به نام storage است. وقتی در یک تب داده‌ای در LocalStorage تغییر کند، سایر تب‌های باز همان سایت از این تغییر مطلع می‌شوند. این امکان فوق‌العاده مفید است اگر بخواهی سایتت در چند تب همزمان همگام بماند. مثلاً اگر کاربر در یک تب از حساب کاربری خارج شود، تب‌های دیگر هم می‌توانند سریعاً واکنش نشان دهند و او را خارج کنند تا تجربه کاربری منسجمی به‌وجود بیاید.

JSON در ذخیره‌سازی

هم LocalStorage و هم SessionStorage تنها می‌توانند داده‌ها را به‌صورت رشته‌های متنی ذخیره کنند و نمی‌توانند به‌صورت مستقیم اشیاء یا آرایه‌ها را نگه دارند. اینجاست که JSON به کمک می‌آید. JSON که مخفف JavaScript Object Notation است، راهی است برای تبدیل داده‌های پیچیده مثل اشیاء یا آرایه‌ها به رشته متنی استاندارد. با استفاده از روش JSON.stringify می‌توانی هر داده پیچیده‌ای را به یک رشته متنی تبدیل کنی و آن را در LocalStorage یا SessionStorage ذخیره کنی. وقتی دوباره نیاز داشته باشی همان داده را استفاده کنی، می‌توانی با JSON.parse آن رشته را دوباره به شیء یا آرایه اولیه تبدیل کنی. این کار بسیار قدرتمند است، اما محدودیت‌هایی هم دارد. مثلاً JSON نمی‌تواند هر چیزی را ذخیره کند؛ توابع، تاریخ‌ها یا داده‌های خاص مثل Symbolها در JSON ذخیره نمی‌شوند یا بعد از parse به شکل دیگری در‌می‌آیند. همچنین هنگام تبدیل داده‌ها با JSON باید حواست به خطاهای احتمالی باشد، چون اگر رشته ذخیره‌شده خراب یا ناقص باشد، هنگام JSON.parse خطا رخ می‌دهد و بهتر است همیشه این فرایند را با try/catch مدیریت کنی.

Best Practices در استفاده از ذخیره‌سازی مرورگر

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

LocalStorage و SessionStorage هر دو ابزارهایی قدرتمند برای ذخیره‌سازی داده‌ها در مرورگر هستند که اگر درست از آن‌ها استفاده شود، می‌توانند تجربه کاربری بسیار جذاب و شخصی‌سازی شده‌ای را فراهم کنند. اما این قدرت، مسئولیت بزرگی هم به همراه دارد و باید همیشه مراقب محدودیت‌ها، امنیت و حجم داده‌های ذخیره‌شده بود. با آشنایی عمیق‌تر با مفاهیمی مثل JSON و مدیریت درست داده‌ها، می‌توانی از این ابزارها بهترین بهره را ببری و وب‌سایت‌هایی بسازی که نه‌تنها سریع و پاسخ‌گو باشند، بلکه حس «هوشمندی» را هم به کاربر منتقل کنند.