119- دروس جافا سكربت – Web Storage API

# مقدمة إلى Web Storage API في JavaScript

تُعد Web Storage API واحدة من الأدوات القوية التي توفرها لغة JavaScript لتخزين البيانات على المتصفح بطريقة سهلة وفعالة. تُمكن هذه التقنية المطورين من الاحتفاظ بالبيانات على جانب العميل، مما يتيح للتطبيقات الاحتفاظ بحالة معينة أو تفضيلات المستخدم بين الجلسات.

## ما هو Web Storage API؟

Web Storage API هي واجهة برمجية تتيح تخزين البيانات في المتصفح. وهي تتكون [شركة برمجة مصرية] من نوعين رئيسيين: **localStorage** و**sessionStorage**. كلاهما يتيحان تخزين البيانات على شكل أزواج مفتاح/قيمة، لكن هناك فرق رئيسي في كيفية وطول مدة تخزين البيانات.

### الفرق بين localStorage و sessionStorage

– **localStorage**: تُخزّن البيانات بشكل دائم (أو حتى يتم حذفها بواسطة السكربت أو المستخدم). هذا يعني أن البيانات ستكون متاحة حتى بعد إغلاق المتصفح وإعادة فتحه.

– **sessionStorage**: تُخزّن البيانات لجلسة واحدة فقط. تبقى البيانات متاحة فقط طالما أن علامة التبويب أو النافذة مفتوحة. بمجرد إغلاقها، يتم مسح البيانات تلقائيًا.

## كيفية استخدام Web Storage API

### استخدام localStorage

// تخزين البيانات
localStorage.setItem('username', 'Ahmed');

// استرجاع البيانات
let user = localStorage.getItem('username');
console.log(user); // Output: Ahmed

// حذف عنصر معين
localStorage.removeItem('username');

// مسح كل البيانات
localStorage.clear();

### استخدام sessionStorage

// تخزين البيانات
sessionStorage.setItem('sessionID', '12345');

// استرجاع البيانات
let sessionId = sessionStorage.getItem('sessionID');
console.log(sessionId); // Output: 12345

// حذف عنصر معين
sessionStorage.removeItem('sessionID');

// مسح كل البيانات
sessionStorage.clear();

## حالات استخدام Web Storage API

1. **تخزين تفضيلات المستخدم**: يمكن استخدام localStorage لتخزين إعدادات أو تفضيلات المستخدم مثل اللغة المفضلة أو الثيم المستخدم للتطبيق.

2. **تتبع حالة الجلسة**: sessionStorage مفيد لتتبع حالة الجلسة، مثل تخزين معلومات تسجيل الدخول المؤقتة أو تتبع مراحل ملء نموذج.

3. **تحسين الأداء**: من خلال تخزين البيانات التي يتم الوصول إليها بشكل متكرر على المتصفح، يمكن تحسين أداء التطبيقات عبر تقليل عدد الطلبات إلى الخادم.

## قيود Web Storage API

– **السعة المحدودة**: عادةً ما تكون السعة لكل مصدر (origin) حوالي 5-10 ميجابايت، وقد تختلف بين المتصفحات.
– **التخزين النصي فقط**: يتم تخزين البيانات [شركة برمجة مصرية] كنصوص. لذا، إذا كنت بحاجة لتخزين كائنات JavaScript، يجب تحويلها إلى JSON باستخدام `JSON.stringify()` و`JSON.parse()`.

## خاتمة

توفر Web Storage API وسيلة بسيطة وفعّالة لتخزين البيانات على جانب العميل باستخدام JavaScript. من خلال فهم كيفية استخدام localStorage وsessionStorage، يمكن للمطورين تحسين تجربة المستخدم عبر الحفاظ على البيانات المهمة وتقديم تجربة سلسة ومخصصة. ومع ذلك، يجب الحذر من القيود المرتبطة بها واستخدامها بحكمة لتحقيق أقصى استفادة منها.