جافاسكربتالتخزين المحلي

ما هو التخزين المحلي

التخزين المحلي ( Local Storage ) هو مساحة تخزين متوفرة في المتصفح ليس لها تاريخ صلاحية و لا يتم حذفها من المتصفح عند الخروج منه.
في هذا الدرس ستتعرف على أهمية التخزين المحلي، كيف تخزن البيانات في ذاكرة المتصفح المحلية، كيف تقرأها و كيف تحذفها منها خطوة خطوة.

كيف يعمل التخزين المحلي

البيانات المخزنة محلياً يتم تخزينها على جهاز المستخدم في ملفات تابعة للمتصفح نفسه و يمكن أيضاً الدخول لمجلدات المتصفح و العثور عليها.
المعلومات في هذه الملفات يتم حفظها على شكل عناصر، و كل عنصر يتألف من إسم و قيمة ( Name/Value ).

إستخدامات التخزين المحلي

عادةً ما يتم استخدام التخزين المحلي لحفظ تفضيلات المستخدم مثل الوضع الذي يفضل أن يشاهد الموقع به (الوضع النهاري أو الليلي) و يمكن استخدامه لحفظ معلومات عامة عن المستخدم مثل إسمه، لغته، جنسه، يملك صورة شخصية أم لا إلخ.. بالإضافة إلى أنه يمكن استخدامه لحفظ بيانات تسجيل الدخول الخاصة به و التي تسمى Tokens.

في حال كان الموقع عبارة عن منصة للشراء أو البيع فإنه يمكن استخدام التخزين المحلي لحفظ العملة التي يفضل المستخدم رؤية الأسعار بها، الدولة أو المنطقة التي يتصفح الموقع منها لمعرفة كلفة الشحن على سبيل المثال و غيرها.

رؤية بيانات الذاكرة المحلية

لرؤية ملفات الكوكيز الخاصة بموقع هرمش في متصفح كروم، يمكنك النقر على F12 و من ثم التوجه للتبويب Application، يليه القسم Storage، يليه النقر على إسم الموقع من القائمة Local Storage كما يظهر في الصورة التالية.

كيفية التعامل مع الذاكرة المحلية

الكائن localStorage أو window.localStorage يوفر دوال جاهزة يمكن من خلالها إنشاء، تحديث أو حذف عناصر من ذاكرة المتصفح المحلية.

إضافة عنصر في الذاكرة المحلية

يمكنك استخدام الدالة localStorage.setItem() لإضافة عنصر جديد في ذاكرة المتصفح المحلية.
عند استدعائها يجب أن تمرر لها قيمتين، الأولى تمثل إسم العنصر و الثانية تمثل قيمته.

في المثال التالي قمنا بإضافة عنصر جديد في الذاكرة المحلية إسمه 'domain' و قيمته 'harmash.com'.

localStorage.setItem('domain', 'harmash.com');

الحصول على قيمة عنصر في الذاكرة المحلية

يمكنك استخدام الدالة localStorage.getItem() للحصول على قيمة عنصر موجود في ذاكرة المتصفح المحلية.
عند استدعائها يجب أن تمرر لها إسم العنصر الذي تريد الحصول على قيمته.

في المثال التالي قمنا بالحصول على قيمة العنصر 'domain' الموجود في ذاكرة المتصفح المحلية.

localStorage.getItem('domain');

تحديث قيمة عنصر في الذاكرة المحلية

الدالة localStorage.setItem() التي نستخدمها لإضافة عنصر في الذاكرة المحلية، يمكننا أيضاً استخدامها لتحديث قيمته و ذلك من خلال إعطاءها إسم العنصر المراد تحديث قيمته و يليها القيمة الجديدة المراد تعيينها له.

في المثال التالي قمنا بإعادة تعيين قيمة العنصر 'language' الموجودة في ذاكرة المتصفح المحلية لتصبح 'arabic'.

// 'english' و قيمته language هنا قمنا بإضافة عنصر جديد في الذاكرة المحلية إسمه
localStorage.setItem('language', 'english');

// 'arabic' و إعادة تعيين قيمته لتصبح language هنا قمنا بتحديث قيمة العنصر
localStorage.setItem('language', 'arabic');

حذف عنصر من الذاكرة المحلية

يمكنك استخدام الدالة localStorage.removeItem() لحذف عنصر موجود في ذاكرة المتصفح المحلية.
عند استدعائها يجب أن تمرر لها إسم العنصر الذي تريد حذفه.

في المثال التالي قمنا بحذف العنصر الذي إسمه 'domain' من ذاكرة المتصفح المحلية.

localStorage.removeItem('domain');

حذف جميع عناصر الذاكرة المحلية

يمكنك استخدام الدالة localStorage.clear() لحذف جميع العناصر الموجود في ذاكرة المتصفح المحلية.

في المثال التالي قمنا بحذف جميع العناصر الموجودة في ذاكرة المتصفح المحلية.

localStorage.remove();

مثال شامل حول التعامل مع الذاكرة المحلية

في المثال التالي قمنا ببناء صفحة فيها ثلاث صناديق:

• الأول يسمح بإضافة عنصر في الذاكرة المحلية.
• الثاني يسمح بالحصول على قيمة عنصر من الذاكرة المحلية.
• الثالث يسمح بحذف عنصر من الذاكرة المحلية.

<div class="box">
    <h3>Add New Item</h3>
    <input id="newItemName" placeholder="Item name"/>
    <input id="newItemValue" placeholder="Item value"/>
    <button onclick="addItem()">Add Item</button>
</div>

<div class="box">
    <h3>Get Item Value</h3>
    <input id="itemNameToGet" placeholder="Item name"/>
    <button onclick="showItem()">Get Value</button>
</div>

<div class="box">
    <h3>Remove Item</h3>
    <input id="itemNameToRemove" placeholder="Item name"/>
    <button onclick="removeItem()">Remove Item</button>
</div>

<script>
    // هذه الدالة تستخدم لإضافة أو تحديث عنصر في الذاكرة المحلية
    function addItem() {
        // هنا قمنا بتخزين إسم و قيمة العنصر المراد إضافته في الذاكرة المحلية
        let itemName = document.querySelector('#newItemName').value;
        let itemValue = document.querySelector('#newItemValue').value;
        // هنا قمنا بإضافة العنصر و قيمته في الذاكرة المحلية
        localStorage.setItem(itemName, itemValue);
        // هنا قمنا بإظهار نافذة منبثقة لإعلام المستخدم أن الإضافة تمت
        alert("Item is added to local storage.");
    }

    // هذه الدالة تستخدم لرؤية قيمة عنصر موجود في الذاكرة المحلية
    function showItem() {
        // هنا قمنا بتخزين إسم العنصر المراد الحصول على قيمته من الذاكرة المحلية
        let itemName = document.querySelector('#itemNameToGet').value;
        // هنا قمنا بإظهار نافذة منبثقة و عرض قيمة العنصر فيها
        alert('Item Value = ' + localStorage.getItem(itemName));
    }

    // هذه الدالة تستخدم للحصول على قيمة عنصر موجود في الذاكرة المحلية
    function removeItem() {
        // هنا قمنا بتخزين إسم العنصر المراد حذفه من الذاكرة المحلية
        let itemName = document.querySelector('#itemNameToRemove').value;
        // هنا قمنا بحذف العنصر - من خلال إسمه - من الذاكرة المحلية
        localStorage.removeItem(itemName);
        // هنا قمنا بإظهار نافذة منبثقة لإعلام المستخدم أنه تم الحذف
        alert("Item is removed from local storage.");
    }
</script>