29- آموزش جاوااسکریپت | آموزش کار با LocalStorage و SessionStorage

ذخیره‌سازی داده‌ها در مرورگر یکی از نیازهای اصلی برای ساخت برنامه‌های کاربردی است که داده‌ها را حتی پس از رفرش شدن صفحه حفظ می‌کنند. در این بخش، APIهای LocalStorage و SessionStorage را بررسی می‌کنیم.

تفاوت LocalStorage و SessionStorage

هر دو API ساختار مشابهی دارند، اما تفاوت اصلی آن‌ها در عمر داده‌هاست:

• LocalStorage: داده‌ها تا زمانی که به صورت دستی (از طریق کد یا پاک کردن کش مرورگر) حذف نشوند، باقی می‌مانند.
• SessionStorage: داده‌ها فقط تا زمانی که تب یا مرورگر باز است در دسترس هستند و پس از بستنِ تب، حذف می‌شوند.

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

هر دو API متدهای یکسانی دارند:

// ذخیره داده (Key-Value)
localStorage.setItem('name', 'John');

// دریافت داده
const name = localStorage.getItem('name');

// حذف یک مورد خاص
localStorage.removeItem('name');

// پاک کردن تمام داده‌ها
localStorage.clear();

نکته مهم: مقدار ذخیره شده در Storage حتماً باید رشته (String) باشد.

کار با داده‌های پیچیده (آرایه‌ها و آبجکت‌ها)

برای ذخیره آرایه‌ها یا آبجکت‌ها، باید ابتدا آن‌ها را با استفاده از JSON.stringify به رشته تبدیل کنید و هنگام خواندن، با JSON.parse دوباره به فرمت اصلی برگردانید:

const user = { name: 'Ali', age: 30 };

// تبدیل به رشته و ذخیره
localStorage.setItem('user', JSON.stringify(user));

// خواندن و تبدیل به آبجکت
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // 'Ali'

مثال کاربردی: ذخیره لیست وظایف (Task List)

در برنامه‌های واقعی، معمولاً لیستی از داده‌ها را ذخیره می‌کنیم. برای اینکه داده‌های جدید جایگزین قبلی‌ها نشوند، باید ابتدا داده‌های موجود را بخوانیم، به آرایه اضافه کنیم و دوباره ذخیره کنیم:

const form = document.querySelector('form');
const input = document.getElementById('task');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const taskValue = input.value;

    // ۱. دریافت داده‌های قبلی یا ایجاد یک آرایه خالی
    let tasks;
    if (localStorage.getItem('tasks') === null) {
        tasks = [];
    } else {
        tasks = JSON.parse(localStorage.getItem('tasks'));
    }

    // ۲. افزودن داده جدید به آرایه
    tasks.push(taskValue);

    // ۳. ذخیره مجدد آرایه به صورت رشته
    localStorage.setItem('tasks', JSON.stringify(tasks));
    
    alert('Task Saved');
    input.value = '';
});

در این بخش آموختیم که چگونه از ظرفیت ذخیره‌سازی مرورگر استفاده کنیم. در بخش‌های بعدی، این دانش را در پروژه‌های پیچیده‌تر برای مدیریت وضعیت برنامه (State Management) به کار خواهیم برد.