Local Storage و Session Storage — JavaScript الأساسيات

Web Storage API

Local Storage

البيانات تبقى حتى بعد إغلاق المتصفح.

// حفظ بيانات
localStorage.setItem('username', 'أحمد');
localStorage.setItem('theme', 'dark');

// قراءة بيانات
const username = localStorage.getItem('username');
console.log(username); // "أحمد"

// حذف بيانات
localStorage.removeItem('username');

// حذف الكل
localStorage.clear();

حفظ Objects و Arrays

// يجب تحويلها لـ JSON
const user = { name: 'سارة', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// قراءة
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "سارة"

// مصفوفة
const todos = ['مهمة 1', 'مهمة 2'];
localStorage.setItem('todos', JSON.stringify(todos));

Session Storage

البيانات تُحذف عند إغلاق التبويب.

// نفس الـ API
sessionStorage.setItem('tempData', 'قيمة مؤقتة');
const temp = sessionStorage.getItem('tempData');
sessionStorage.removeItem('tempData');

مثال عملي: حفظ الإعدادات

const settings = {
  theme: 'dark',
  language: 'ar',
  fontSize: 16
};

function saveSettings(settings) {
  localStorage.setItem('appSettings', JSON.stringify(settings));
}

function loadSettings() {
  const saved = localStorage.getItem('appSettings');
  return saved ? JSON.parse(saved) : defaultSettings;
}

// نظام إدارة سلة التسوق
const CartManager = {
  key: 'shopping-cart',
  
  // الحصول على السلة
  getCart() {
    const cart = localStorage.getItem(this.key);
    return cart ? JSON.parse(cart) : [];
  },
  
  // إضافة منتج
  addItem(product) {
    const cart = this.getCart();
    const existing = cart.find(item => item.id === product.id);
    
    if (existing) {
      existing.quantity++;
    } else {
      cart.push({ ...product, quantity: 1 });
    }
    
    localStorage.setItem(this.key, JSON.stringify(cart));
    return cart;
  },
  
  // حذف منتج
  removeItem(productId) {
    const cart = this.getCart().filter(item => item.id !== productId);
    localStorage.setItem(this.key, JSON.stringify(cart));
    return cart;
  },
  
  // إفراغ السلة
  clear() {
    localStorage.removeItem(this.key);
  },
  
  // حساب المجموع
  getTotal() {
    return this.getCart().reduce(
      (sum, item) => sum + item.price * item.quantity, 0
    );
  }
};

// الاستخدام
CartManager.addItem({ id: 1, name: 'هاتف', price: 999 });
console.log(CartManager.getTotal());