Local Storage و Session Storage
Local Storage و Session Storage ابزارهای حیاتی برای ذخیره‌سازی داده‌ها در سمت کاربر در جاوااسکریپت هستند. Local Storage امکان ذخیره داده‌ها به صورت دائمی در مرورگر را فراهم می‌کند، حتی بعد از بسته شدن مرورگر، در حالی که Session Storage داده‌ها را فقط برای طول عمر یک تب مرورگر نگه می‌دارد و با بستن تب حذف می‌شوند. این ویژگی‌ها برای فروشگاه‌های آنلاین، وب‌سایت‌های خبری، وبلاگ‌های شخصی و پورتال‌های دولتی بسیار کاربردی هستند. برای مثال، یک فروشگاه آنلاین می‌تواند اطلاعات سبد خرید را در Session Storage ذخیره کند تا در طول جلسه باقی بماند، در حالی که Local Storage می‌تواند ترجیحات کاربر مانند تم یا زبان را ذخیره کند تا در بازدیدهای بعدی نیز اعمال شود.
در این آموزش پیشرفته، شما یاد خواهید گرفت که چگونه داده‌ها را ایجاد، خواندن، بروزرسانی و حذف کنید، چه در Local Storage و چه در Session Storage. همچنین به مفاهیم پیشرفته‌ای مانند سریال‌سازی JSON، مدیریت خطا و بهینه‌سازی عملکرد پرداخته می‌شود. تصور کنید Local Storage مانند یک کتابخانه دائمی است که هر کتاب در آن امن و همیشگی نگهداری می‌شود، و Session Storage مانند یک یادداشت موقت روی میز است که فقط برای کار جاری کاربرد دارد. این تشبیه‌ها به شما کمک می‌کنند تا تصمیم بگیرید چه زمانی از کدام روش ذخیره‌سازی استفاده کنید و تجربه کاربری بهتری ایجاد نمایید.
مثال پایه
javascript// مثال پایه برای Local Storage و Session Storage
// ذخیره نام کاربر در Local Storage
localStorage.setItem('username', 'Ali');
// دریافت نام کاربر ذخیره شده
const user = localStorage.getItem('username');
console.log('نام کاربر ذخیره شده:', user);
// حذف یک آیتم خاص
localStorage.removeItem('username');
// پاک کردن تمام داده‌های Local Storage
localStorage.clear();در این مثال پایه، با استفاده از localStorage.setItem() نام کاربر "Ali" در مرورگر ذخیره می‌شود. متد setItem() دو پارامتر می‌گیرد: کلید (key) و مقدار (value) و مقدار را به صورت رشته ذخیره می‌کند. این عمل مانند گذاشتن یک کتاب روی قفسه دائمی است تا بعداً بتوان آن را برداشت. با getItem() می‌توان داده ذخیره‌شده را با استفاده از کلید دریافت کرد، removeItem() یک مورد خاص را حذف می‌کند و clear() تمامی داده‌ها را پاک می‌کند، همانند خالی کردن یک قفسه کامل.
نکته مهم این است که Local Storage و Session Storage فقط می‌توانند رشته‌ها را ذخیره کنند. برای ذخیره‌سازی اشیاء یا آرایه‌ها باید از JSON.stringify() استفاده کرده و هنگام خواندن داده، با JSON.parse() آن را تبدیل کرد. این روش برای ذخیره اطلاعات سبد خرید در فروشگاه‌های آنلاین یا داده‌های موقت در وبلاگ‌ها بسیار مفید است. این ذخیره‌سازی به شما اجازه می‌دهد بدون نیاز به بارگذاری مجدد صفحه، داده‌ها را به‌روزرسانی کنید و تجربه کاربری روانی ایجاد نمایید.
مثال کاربردی
javascript// مثال کاربردی: ذخیره تنظیمات تم کاربر در وبلاگ شخصی
const themeSelector = document.getElementById('theme');
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.className = savedTheme; // اعمال تم ذخیره شده
}
// گوش دادن به تغییرات تم
themeSelector.addEventListener('change', (e) => {
const selectedTheme = e.target.value;
document.body.className = selectedTheme;
localStorage.setItem('theme', selectedTheme); // ذخیره ترجیح کاربر
});
// مثال Session Storage: ذخیره موقت وضعیت ورود
sessionStorage.setItem('loggedIn', 'true');
console.log('وضعیت ورود:', sessionStorage.getItem('loggedIn'));در این مثال کاربردی، Local Storage برای ذخیره ترجیحات تم کاربر در یک وبلاگ شخصی استفاده شده است. هنگام بارگذاری صفحه، getItem() برای بازیابی تم ذخیره شده استفاده می‌شود و تجربه کاربری ثابت و مستمر ایجاد می‌کند. addEventListener تغییرات کاربر را پیگیری می‌کند و بلافاصله UI و Local Storage را بروزرسانی می‌کند. این شبیه به تزئین یک اتاق و ثبت هر تغییر روی یک یادداشت دائمی است.
در عین حال، Session Storage وضعیت ورود کاربر را به صورت موقت ذخیره می‌کند. sessionStorage.setItem() تنها برای طول عمر تب فعال است و با بستن تب، داده حذف می‌شود. این روش برای مدیریت داده‌های موقت در فروشگاه‌های آنلاین، وبلاگ‌ها یا پورتال‌های دولتی بسیار مفید است. ترکیب هر دو روش امکان مدیریت چرخه عمر داده‌ها و بهینه‌سازی تجربه کاربری را فراهم می‌کند.
بهترین روش‌ها شامل: اول، سریال‌سازی اشیاء پیچیده با JSON.stringify()؛ دوم، بررسی پشتیبانی مرورگر قبل از انجام عملیات ذخیره‌سازی؛ سوم، استفاده از کلیدهای یکتا و واضح برای جلوگیری از تداخل؛ و چهارم، حذف منظم داده‌های غیرضروری برای جلوگیری از نشت حافظه. اشتباهات رایج شامل ذخیره داده‌های زیاد، عدم مدیریت خطا در مرورگرهای قدیمی، نادیده گرفتن طول عمر Session Storage و رویدادهای نادرست است. برای دیباگینگ از try/catch، بررسی getItem() روی null و استفاده از پنل Storage در ابزارهای توسعه‌دهنده استفاده کنید. همیشه ساختار داده‌ها و طول عمر آنها را برنامه‌ریزی کنید و ترکیب مناسبی از Local و Session Storage بر اساس نیازهای اپلیکیشن استفاده نمایید.
📊 مرجع سریع
| Property/Method | Description | Example |
|---|---|---|
| setItem(key, value) | ذخیره یک مقدار با کلید مشخص | localStorage.setItem('theme', 'dark') |
| getItem(key) | دریافت مقدار بر اساس کلید | const theme = localStorage.getItem('theme') |
| removeItem(key) | حذف یک مورد خاص | localStorage.removeItem('theme') |
| clear() | حذف تمام داده‌ها | localStorage.clear() |
| JSON.stringify(value) | سریال‌سازی یک شیء یا آرایه | localStorage.setItem('cart', JSON.stringify(\[{id:1}])) |
| JSON.parse(value) | تبدیل رشته ذخیره شده به شیء یا آرایه | const cart = JSON.parse(localStorage.getItem('cart')) |
خلاصه و مراحل بعدی: Local Storage و Session Storage ابزارهای قدرتمندی برای مدیریت داده‌های سمت کاربر هستند. Local Storage مناسب ذخیره‌سازی ترجیحات دائمی کاربر است، در حالی که Session Storage برای داده‌های موقت مانند وضعیت ورود کاربرد دارد. ترکیب این روش‌ها با HTML DOM امکان بروزرسانی پویا UI را فراهم می‌کند و ارتباط با Backend برای ذخیره دائمی داده‌ها امکان‌پذیر می‌شود. پیشنهاد می‌شود برای یادگیری بیشتر، IndexedDB، استراتژی‌های امن ذخیره‌سازی سمت کاربر و تکنیک‌های بهینه‌سازی عملکرد را مطالعه کنید. تمرین در سناریوهای مختلف درک شما از چرخه عمر داده‌ها و توسعه اپلیکیشن‌های پیچیده را تقویت می‌کند.
🧠 دانش خود را بیازمایید
آزمون دانش شما
درک خود از این موضوع را با سوالات کاربردی بسنجید.
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود