JS / التخزين المحلي

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

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

التخزين المحلي (Local Storage) هو مساحة تخزين متوفرة في المتصفح ليس لها تاريخ صلاحية و لا يتم حذفها من المتصفح عند الخروج منه.

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

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

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

مثال

mode = light

معظم المتصفحات تخصص 5MB-10MB كحد أقصى كمساحة تخزين محلي لكل موقع يزوره المستخدم. مما يعني أنه في حال كان حجم البيانات المخزنة في الملف أكبر من ذلك فإن ذلك قد يسبب فقدان بالبيانات.

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

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

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

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

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

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

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

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

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

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

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

مثال

📋

localStorage.setItem('domain', 'codafox.blogspot.com');

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

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

في حال مررت لها إسم عنصر غير موجود فإنها تعطيك القيمة null.

في المثال التالي قمنا بالحصول على قيمة العنصر '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();

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box; 
        }
        
        body {
            padding: 20px;
            font-family: arial;
        }
        
        .box {
            background: #e69009;
            padding: 15px;
            margin: 20px 0;
        }
        
        .box h3 {
            margin-bottom: 10px;
        }
        
        .box input, .box button {
            display: block;
            margin-top: 10px;
            height: 30px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>JavaScript Local Storage</h1>
    
    <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>
</body>
</html>