۱۰-۵ Web Storage (localStorage و sessionStorage)

Web Storage: وقتی مرورگر باید چیزی رو به‌خاطر بسپاره

تا اینجای این فصل، با ابزارهایی آشنا شدیم که یا اطلاعات رو نمایش می‌دن (progress، meter) یا رفتار کاربر رو مدیریت می‌کنن (draggable، contenteditable). حالا می‌رسیم به یه قابلیت کاملاً متفاوت: Web Storage، که به یه صفحه‌ی وب اجازه می‌ده اطلاعاتی رو مستقیم تو مرورگر کاربر ذخیره کنه، بدون نیاز به ارسال هر بار به سرور.

چرا اصلاً به Web Storage نیاز داریم؟

قبل از HTML5، تنها راه ذخیره‌ی اطلاعات تو مرورگر، استفاده از کوکی‌ها (Cookies) بود؛ اما کوکی‌ها محدودیت‌های زیادی داشتن: حجم خیلی کمی (حدود ۴ کیلوبایت) پشتیبانی می‌کردن و هر بار که یه درخواست به سرور می‌رفت، خودکار همراه اون درخواست فرستاده می‌شدن، حتی اگه لازم نبود. Web Storage این مشکلات رو حل می‌کنه: حجم خیلی بیشتری (معمولاً حدود ۵ تا ۱۰ مگابایت) رو پشتیبانی می‌کنه و هیچ‌وقت خودکار به سرور فرستاده نمی‌شه؛ فقط تو خود مرورگر باقی می‌مونه.

دو نوع Web Storage: localStorage و sessionStorage

HTML5 دو نوع فضای ذخیره‌سازی داره که هر دو از یه API مشابه استفاده می‌کنن، اما طول عمر متفاوتی دارن:

• localStorage: اطلاعات به‌صورت دائمی ذخیره می‌شن؛ حتی اگه کاربر مرورگر رو کامل ببنده و دوباره باز کنه، یا سیستمش رو خاموش و روشن کنه، اطلاعات همچنان باقی می‌مونن (مگه اینکه دستی پاک بشن).
• sessionStorage: اطلاعات فقط تا زمانی که همون تب مرورگر بازه باقی می‌مونن؛ به‌محض بستن اون تب، تمام اطلاعات sessionStorage پاک می‌شن.

این یه قابلیت جاوااسکریپتی است، نه یه تگ HTML

یه نکته‌ی مهم قبل از ادامه: برخلاف بقیه‌ی مباحث این دوره که حول تگ‌ها و ویژگی‌های HTML بودن، Web Storage اصلاً یه تگ HTML نیست؛ این یه API (رابط برنامه‌نویسی) هست که فقط از طریق جاوااسکریپت قابل‌استفاده‌ست. اما چون این قابلیت رسماً بخشی از استاندارد HTML5 محسوب می‌شه و یکی از ویژگی‌های مهم این نسخه از HTML بود (دقیقاً مثل چیزی که تو درس ۱-۲ بهش اشاره کردیم)، تو این فصل بهش می‌پردازیم.

نحوه‌ی کار با localStorage

<script>
  // ذخیره‌ی یه مقدار
  localStorage.setItem("username", "علی محمدی");

  // خواندن یه مقدار
  const name = localStorage.getItem("username");
  console.log(name); // "علی محمدی"

  // حذف یه مقدار خاص
  localStorage.removeItem("username");

  // پاک‌کردن کامل تمام مقادیر
  localStorage.clear();
</script>

متدهای اصلی خیلی ساده‌ن: setItem(key, value) برای ذخیره، getItem(key) برای خوندن، removeItem(key) برای حذف یه مقدار خاص، و clear() برای پاک‌کردن همه‌چیز.

نحوه‌ی کار با sessionStorage

<script>
  sessionStorage.setItem("currentStep", "2");
  const step = sessionStorage.getItem("currentStep");
</script>

متدهای sessionStorage دقیقاً همون‌هایی هستن که برای localStorage دیدیم؛ تنها فرق واقعیشون طول عمر داده‌هاست، نه نحوه‌ی استفاده.

یه مثال کاربردی: به‌خاطرسپردن حالت تیره/روشن سایت

<button onclick="localStorage.setItem('theme', 'dark')">فعال‌کردن حالت تیره</button>

<script>
  if (localStorage.getItem("theme") === "dark") {
    document.body.style.backgroundColor = "black";
    document.body.style.color = "white";
  }
</script>

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

یه مثال کاربردی: پیگیری مرحله‌ی یه فرم چندمرحله‌ای با sessionStorage

<script>
  sessionStorage.setItem("formStep", "3");
</script>

اگه یه فرم چندمرحله‌ای داری (مثل فرآیند سفارش تو فروشگاه آنلاین) و کاربر تصادفی صفحه رو رفرش کنه، می‌شه با sessionStorage مرحله‌ی فعلی رو ذخیره کرد تا کاربر دوباره از همون مرحله ادامه بده، نه از اول؛ اما چون این اطلاعات فقط تا وقتی تب بازه معتبره، اگه کاربر تب رو ببنده و بعداً برگرده، این پیشرفت پاک شده و از نو شروع می‌شه (که برای این نوع کاربرد معمولاً منطقی‌تره تا localStorage دائمی).

محدودیت‌های Web Storage

• فقط داده‌های متنی (رشته) قابل‌ذخیره‌ست؛ برای ذخیره‌ی اشیای پیچیده (مثل یه آرایه یا شیء)، باید اول با JSON.stringify() به متن تبدیلشون کرد و موقع خوندن با JSON.parse() دوباره به فرمت اصلی برگردوند.
• محدود به همون دامنه‌ای هست که ذخیره شده؛ یعنی یه سایت نمی‌تونه به localStorage سایت دیگه‌ای دسترسی داشته باشه.
• حجم قابل‌ذخیره محدوده (معمولاً چند مگابایت)؛ برای حجم‌های خیلی بزرگ‌تر، تکنولوژی‌های دیگه‌ای مثل IndexedDB وجود دارن که خارج از این دوره‌ست.

نکته‌ی امنیتی مهم: هرگز اطلاعات حساس رو ذخیره نکن

دقیقاً مثل چیزی که تو درس ۱۰-۱ درباره‌ی data-* گفتیم، localStorage و sessionStorage هم کاملاً از طریق ابزارهای توسعه‌دهنده‌ی مرورگر (Developer Tools) قابل‌مشاهده و دستکاری هستن. هیچ‌وقت نباید اطلاعات حساس مثل رمز عبور، توکن‌های امنیتی حساس، یا اطلاعات شخصی محرمانه رو تو این فضاها ذخیره کرد.

مقایسه‌ی کامل localStorage، sessionStorage و کوکی

ویژگی	localStorage	sessionStorage	کوکی
طول عمر	دائمی (تا پاک‌شدن دستی)	فقط تا بسته‌شدن تب	قابل‌تنظیم (معمولاً محدود)
حجم تقریبی	۵ تا ۱۰ مگابایت	۵ تا ۱۰ مگابایت	حدود ۴ کیلوبایت
ارسال خودکار به سرور	خیر	خیر	بله، با هر درخواست

چند اشتباه رایج

• ذخیره‌ی اطلاعات حساس (مثل رمز عبور) تو localStorage یا sessionStorage.
• تلاش برای ذخیره‌ی مستقیم یه شیء یا آرایه بدون تبدیل به JSON، که باعث خطا یا ذخیره‌ی نادرست می‌شه.
• استفاده از localStorage برای داده‌هایی که باید فقط موقتی و مخصوص همون جلسه‌ی کاربری باشن، در حالی که sessionStorage مناسب‌تر بود.

بهترین روش‌ها

• برای ترجیحات دائمی کاربر (مثل تنظیمات ظاهری)، از localStorage استفاده کن.
• برای اطلاعات موقتی مخصوص یه جلسه‌ی خاص (مثل مرحله‌ی فعلی یه فرم)، از sessionStorage استفاده کن.
• هیچ‌وقت اطلاعات حساس یا امنیتی رو تو Web Storage ذخیره نکن.

نکته‌ی سئو

محتوای ذخیره‌شده در localStorage یا sessionStorage توسط موتورهای جستجو قابل‌مشاهده یا ایندکس‌شدن نیست، چون این داده‌ها فقط سمت کاربر (Client-side) و پس از بارگذاری اولیه‌ی صفحه در دسترس هستند.

نکته‌ی دسترسی‌پذیری

Web