🔐 كيفية بناء نظام تسجيل دخول بسيط باستخدام LocalStorage وJavaScript فقط

في عالم تطوير الويب، كثيرًا ما نحتاج إلى بناء نظام تسجيل دخول بسيط لتجربة المفاهيم أو إنشاء نماذج أولية دون الحاجة إلى خادم (Back-End). في هذا المقال، سنقوم ببناء نموذج تسجيل وتسجيل دخول باستخدام JavaScript وLocalStorage فقط، دون الحاجة إلى قواعد بيانات أو PHP أو أي مكتبة خارجية.

📦 ما هو LocalStorage؟

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

🛠️ أهداف المشروع:

صفحة واحدة تحتوي على نموذج تسجيل جديد.
إمكانية تسجيل دخول للمستخدم المسجل.
حفظ البيانات باستخدام LocalStorage.
عرض رسالة ترحيب بعد الدخول بنجاح.

🧪 الكود الكامل للمشروع

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>نظام تسجيل بسيط</title>
  <style>
    body { font-family: Tahoma; padding: 30px; background: #f4f4f4; }
    input { display: block; margin: 10px 0; padding: 10px; width: 250px; }
    button { padding: 10px 20px; background: green; color: white; border: none; cursor: pointer; }
    .form-box { background: white; padding: 20px; width: 300px; box-shadow: 0 0 5px #aaa; }
  </style>
</head>
<body>

  <div class="form-box">
    <h2>تسجيل مستخدم جديد</h2>
    <input type="text" id="newUsername" placeholder="اسم المستخدم" />
    <input type="password" id="newPassword" placeholder="كلمة المرور" />
    <button onclick="register()">تسجيل</button>

    <h2>دخول المستخدم</h2>
    <input type="text" id="loginUsername" placeholder="اسم المستخدم" />
    <input type="password" id="loginPassword" placeholder="كلمة المرور" />
    <button onclick="login()">دخول</button>

    <p id="message"></p>
  </div>

  <script>
    function register() {
      let username = document.getElementById("newUsername").value;
      let password = document.getElementById("newPassword").value;

      if (username && password) {
        localStorage.setItem("user", JSON.stringify({ username: username, password: password }));
        document.getElementById("message").innerText = "تم التسجيل بنجاح!";
      } else {
        document.getElementById("message").innerText = "يرجى إدخال جميع الحقول.";
      }
    }

    function login() {
      let username = document.getElementById("loginUsername").value;
      let password = document.getElementById("loginPassword").value;

      let user = JSON.parse(localStorage.getItem("user"));

      if (user && username === user.username && password === user.password) {
        document.body.innerHTML = "<h1>مرحبًا بك، " + user.username + "!</h1>";
      } else {
        document.getElementById("message").innerText = "اسم المستخدم أو كلمة المرور غير صحيحة.";
      }
    }
  </script>

</body>
</html>

💡 ملاحظات مهمة

هذه الطريقة لا تصلح للمواقع الحقيقية أو التجارية، لأنها غير آمنة.
البيانات غير مشفرة، ويمكن لأي شخص أن يراها من أدوات المطور.
مفيدة فقط لأغراض التعليم أو النماذج الأولية (prototypes).

✅ الخاتمة

بناء نظام تسجيل دخول بسيط باستخدام JavaScript وLocalStorage يُعد طريقة رائعة لتعلم مفاهيم البرمجة، التخزين، والتحقق من البيانات. لكن، إذا أردت بناء نظام حقيقي وآمن، فيجب استخدام قواعد بيانات، تشفير البيانات، وخادم (Back-End) مثل PHP أو Node.js.