ذخیره داده‌های فروشگاه اینترنتی در localStorage

🎯 اهداف یادگیری

• آشنایی با مفهوم و کاربرد localStorage در مرورگر
• یادگیری روش ذخیره و بازیابی داده‌ها
• پیاده‌سازی سبد خرید با localStorage
• مدیریت وضعیت کاربر و تنظیمات با localStorage

📌 localStorage چیست؟

localStorage یک فضای ذخیره‌سازی در مرورگر است که داده‌ها را به صورت دائمی (حتی پس از بستن مرورگر) نگهداری می‌کند:

// ذخیره داده در localStorage
localStorage.setItem('username', 'user123');
// بازیابی داده از localStorage
const username = localStorage.getItem('username');
console.log(username); // خروجی: user123

ویژگی‌های کلیدی localStorage:

• ظرفیت حدود 5MB: برای هر دامین (بیشتر از cookies)
• ذخیره‌سازی بدون تاریخ انقضا: داده‌ها تا زمانی که کاربر پاک نکند باقی می‌مانند
• ذخیره‌سازی کلید-مقدار: مقادیر فقط به صورت رشته ذخیره می‌شوند

📌 پیاده‌سازی سبد خرید با localStorage

برای ذخیره سبد خرید کاربر از شیء JSON استفاده می‌کنیم:

// تابع اضافه کردن محصول به سبد خرید
function addToCart(product) {
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  cart.push(product);
  localStorage.setItem('cart', JSON.stringify(cart));
  updateCartCounter();
}
// تابع به‌روزرسانی تعداد محصولات در سبد خرید
function updateCartCounter() {
  const cart = JSON.parse(localStorage.getItem('cart')) || [];
  document.getElementById('cart-counter').textContent = cart.length;
}

نکات مهم پیاده‌سازی:

• تبدیل به JSON: برای ذخیره آرایه یا شیء باید از JSON.stringify استفاده کنید
• بازیابی داده: هنگام خواندن از localStorage از JSON.parse استفاده کنید
• مقدار پیش‌فرض: اگر داده‌ای وجود نداشت با || مقدار پیش‌فرض تعیین کنید

📌 مدیریت وضعیت کاربر با localStorage

می‌توانیم وضعیت ورود کاربر و تنظیماتش را در localStorage ذخیره کنیم:

// ذخیره وضعیت ورود کاربر
function loginUser(userData) {
  localStorage.setItem('isLoggedIn', 'true');
  localStorage.setItem('user', JSON.stringify(userData));
  updateUI();
}
// بررسی وضعیت ورود کاربر هنگام بارگذاری صفحه
function checkAuth() {
  const isLoggedIn = localStorage.getItem('isLoggedIn');
  if (isLoggedIn === 'true') {
    const user = JSON.parse(localStorage.getItem('user'));
    showUserProfile(user);
  }
}

کاربردهای متداول:

• ذخیره تنظیمات کاربر: مانند تم تاریک/روشن، زبان انتخابی
• حفظ وضعیت ورود: برای نمایش مناسب به کاربران وارد شده
• ذخیره داده‌های موقت: فرم‌های نیمه‌کاره یا داده‌های جستجو

📌 محدودیت‌ها و نکات امنیتی

📌 تمرین عملی

یک سیستم علاقه‌مندی محصولات با localStorage پیاده‌سازی کنید:

function toggleFavorite(productId) {
  // کد شما اینجا قرار می‌گیرد
}

راهنمای تمرین:

1. آرایه‌ای از شناسه محصولات مورد علاقه در localStorage ذخیره کنید
2. تابعی بنویسید که محصولی را به لیست علاقه‌مندی‌ها اضافه یا حذف کند
3. وضعیت دکمه علاقه‌مندی را بر اساس localStorage به‌روز کنید
4. صفحه را طوری طراحی کنید که محصولات مورد علاقه را نمایش دهد

📌 قدم بعدی

در بخش بعدی پروژه، با مدیریت وضعیت پیشرفته با Redux آشنا خواهیم شد!