التعامل مع التخزين المحلي (Local Storage) في HTML5

التخزين المحلي (Local Storage) هو ميزة من ميزات HTML5 تسمح لتطبيقات الويب بتخزين البيانات على جهاز المستخدم محليًا. هذه البيانات تبقى محفوظة حتى بعد إغلاق المتصفح، مما يجعلها مفيدة لتخزين إعدادات المستخدم، تفضيلات الموقع، أو أي بيانات تحتاج إلى البقاء لفترات طويلة.

مزايا Local Storage

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

استخدام Local Storage

تخزين البيانات:
يمكنك استخدام localStorage.setItem لتخزين البيانات.

localStorage.setItem('username', 'JohnDoe');

استرجاع البيانات:
استخدم localStorage.getItem لاسترجاع البيانات المخزنة.

const username = localStorage.getItem('username');
console.log(username); // Outputs: JohnDoe

حذف بيانات معينة:
يمكنك حذف مفتاح محدد باستخدام localStorage.removeItem.

localStorage.removeItem('username');

حذف جميع البيانات:
استخدم localStorage.clear لمسح جميع البيانات المخزنة.

localStorage.clear();

مثال عملي

تطبيق بسيط لتخزين اسم المستخدم وعرضه:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Local Storage Example</title>
</head>
<body>
    <h1>Welcome, <span id="usernameDisplay">Guest</span></h1>
    <input type="text" id="usernameInput" placeholder="Enter your name">
    <button onclick="saveUsername()">Save</button>
    <button onclick="clearUsername()">Clear</button>

    <script>
        const usernameDisplay = document.getElementById('usernameDisplay');
        const usernameInput = document.getElementById('usernameInput');

        // Load saved username on page load
        if (localStorage.getItem('username')) {
            usernameDisplay.textContent = localStorage.getItem('username');
        }

        // Save username to Local Storage
        function saveUsername() {
            const username = usernameInput.value;
            localStorage.setItem('username', username);
            usernameDisplay.textContent = username;
        }

        // Clear username from Local Storage
        function clearUsername() {
            localStorage.removeItem('username');
            usernameDisplay.textContent = 'Guest';
        }
    </script>
</body>
</html>

الفرق بين Local Storage و Session Storage

Local Storage: يحتفظ بالبيانات حتى يتم حذفها يدويًا، بغض النظر عن جلسات التصفح.
Session Storage: يحتفظ بالبيانات فقط أثناء الجلسة الحالية، ويتم حذفها عند إغلاق المتصفح.

مثال على استخدام Session Storage:

sessionStorage.setItem('sessionKey', 'Session Value');
console.log(sessionStorage.getItem('sessionKey')); // Outputs: Session Value
sessionStorage.removeItem('sessionKey');

أفضل الممارسات

لا تستخدم Local Storage لتخزين بيانات حساسة مثل كلمات المرور، لأنها غير مشفرة.
تأكد من التحقق من وجود المفاتيح قبل محاولة الوصول إليها لتجنب الأخطاء.
قم بضغط البيانات الكبيرة باستخدام JSON لتوفير المساحة.

const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// استرجاع البيانات
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.name); // Outputs: John

ملخص

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

تعلم HTML5

المناهج الدراسية

التعامل مع التخزين المحلي (Local Storage) في HTML5