التخزين المحلي في لغة JavaScript

التخزين المحلي في لغة JavaScript

أهلاً بكم! اليوم بنتكلم عن موضوع مهم ومفيد جداً في تطوير الويب: التخزين المحلي (Local Storage) في JavaScript. تخيل إنك تحتاج تحفظ بيانات بسيطة عند المستخدم في المتصفح حقه عشان لما يرجع للموقع مرة ثانية يلقاها موجودة. هنا يجي دور التخزين المحلي.

إيش هو التخزين المحلي؟

ببساطة، هو طريقة لتخزين البيانات على جهاز المستخدم (في المتصفح تحديداً) بشكل دائم، يعني حتى لو قفل المتصفح ورجع فتحه أو قفل الجهاز كله، البيانات بتكون موجودة. كل موقع (أو "Origin" عشان نكون دقيقين) له مساحة تخزين خاصة فيه، وما يقدر يشوف بيانات المواقع الثانية. الحد الأقصى للتخزين عادة يكون 5MB أو أكثر حسب المتصفح.

localStorage ولا sessionStorage؟

فيه نوعين رئيسيين للتخزين في المتصفح:

• localStorage: البيانات اللي تخزنها هنا تبقى موجودة حتى لو قفلت المتصفح ورجعت فتحته. دائمة.
• sessionStorage: البيانات اللي تخزنها هنا تبقى موجودة فقط طالما نافذة أو تبويبة المتصفح مفتوحة. لو قفلت التبويبة، البيانات تروح. مؤقتة.

درسنا اليوم بيركز على localStorage.

العمليات الأساسية مع localStorage

التعامل مع localStorage سهل جداً. هو عبارة عن كائن (Object) جاهز في المتصفح.

1. تخزين البيانات (setItem)

عشان تحفظ أي بيانات، تستخدم دالة setItem. تأخذ مفتاح (key) وقيمة (value). انتبه، القيمة لازم تكون نص (string):

localStorage.setItem('username', 'أحمد');
localStorage.setItem('theme', 'dark');

لو حاولت تخزن رقم أو بوليان، بيتم تحويلها لنص تلقائياً. مثلاً localStorage.setItem('age', 30); بيخزن '30'.

2. استرجاع البيانات (getItem)

عشان تسترجع البيانات المخزنة، تستخدم دالة getItem وتعطيها المفتاح:

let username = localStorage.getItem('username');
console.log(username); // بيطبع: أحمد

let theme = localStorage.getItem('theme');
console.log(theme); // بيطبع: dark

let nonExistentItem = localStorage.getItem('email');
console.log(nonExistentItem); // بيطبع: null (لأنها مو موجودة)

3. حذف عنصر معين (removeItem)

لو حبيت تحذف عنصر معين بالمفتاح حقه:

localStorage.removeItem('theme');
console.log(localStorage.getItem('theme')); // بيطبع: null

4. مسح كل البيانات (clear)

هذه الدالة تمسح كل شيء مخزن للموقع الحالي في localStorage:

localStorage.clear();
console.log(localStorage.length); // بيطبع: 0

5. عدد العناصر (length)

تقدر تعرف كم عنصر مخزن باستخدام خاصية length:

localStorage.setItem('item1', 'value1');
localStorage.setItem('item2', 'value2');
console.log(localStorage.length); // بيطبع: 2

6. الحصول على المفتاح بواسطة الفهرس (key)

تقدر تستعرض المفاتيح المخزنة باستخدام دالة key والفهرس:

localStorage.setItem('fruit', 'apple');
localStorage.setItem('color', 'red');

for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage.getItem(key);
    console.log(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">${key}: ${value}</code>);
}
// بيطبع:
// fruit: apple
// color: red

تخزين البيانات المعقدة (Objects & Arrays)

تذكر إن localStorage ما يقبل إلا نصوص. طيب لو عندي كائن JavaScript أو مصفوفة وحاب أحفظها؟ هنا نستخدم JSON.stringify() للتحويل لنص قبل التخزين، و JSON.parse() للتحويل لكائن/مصفوفة بعد الاسترجاع.

let userSettings = {
    darkMode: true,
    fontSize: 'medium',
    notifications: ['email', 'sms']
};

// تخزين الكائن بعد تحويله لنص JSON
localStorage.setItem('settings', JSON.stringify(userSettings));

// استرجاع الكائن بعد تحويله من نص JSON
let storedSettings = JSON.parse(localStorage.getItem('settings'));

console.log(storedSettings.darkMode);     // بيطبع: true
console.log(storedSettings.notifications); // بيطبع: ['email', 'sms']

// لو حاولنا نسترجع شيء مو موجود أو غير صالح كـ JSON
let invalidJson = localStorage.getItem('nonExistent');
// لو حاولنا: JSON.parse(invalidJson); بتعطينا خطأ (Error)
// لذلك، دائماً نتحقق إذا القيمة موجودة قبل التحويل
let safeParse = JSON.parse(localStorage.getItem('nonExistent')) || {};

ملاحظة مهمة: التخزين المحلي غير آمن للبيانات الحساسة زي كلمات المرور أو معلومات البطاقة الائتمانية. هو مخصص للبيانات اللي ما فيها مشكلة لو كانت ظاهرة للمستخدم أو لو تم تعديلها. استخدمه لـ "تفضيلات المستخدم" أو "حالة التطبيق" وليس للبيانات السرية.

مثال عملي: عداد الزيارات

خلونا نسوي عداد بسيط يحفظ كم مرة زار المستخدم الصفحة:

// نجيب عدد الزيارات الحالي
let visitCount = localStorage.getItem('pageVisits');

// لو ما كان فيه قيمة، يعني أول زيارة، بنحط 0
if (visitCount === null) {
    visitCount = 0;
} else {
    // لو كانت موجودة، بنحولها لرقم
    visitCount = parseInt(visitCount);
}

// بنزيد العدد بواحد
visitCount++;

// بنخزن العدد الجديد
localStorage.setItem('pageVisits', visitCount);

// بنعرض العدد للمستخدم
document.getElementById('visitCounter').innerText = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">لقد زرت هذه الصفحة ${visitCount} مرة.</code>;

// في HTML بنحتاج عنصر بهذا الـ id:
// <p id="visitCounter"></p>

خلاصة

التخزين المحلي أداة قوية ومفيدة جداً في JavaScript لبناء تجارب مستخدم أفضل وأكثر تفاعلية. تذكر دائماً استخدامه للبيانات غير الحساسة ولتخزين البيانات كنصوص، وتحويل الكائنات والمصفوفات باستخدام JSON.stringify() و JSON.parse().

أتمنى يكون الدرس واضح ومفيد لكم!

← السابقالفهرس