تخزين البيانات في متصفح الويب باستخدام JavaScript و localStorage

عليك باستخدام localStorage لحفظ القيم المدخلة في حقول الإدخال، وذلك بتعديل السكريبت لديك بالشكل التالي:

let submit = document.getElementById('submit');
let text = document.getElementById('text');
let password = document.getElementById('password');

// عرض البيانات المحفوظة عند تحميل الصفحة
window.onload = function() {
    let savedText = localStorage.getItem('text');
    if (savedText) {
        text.value = savedText;
    }

    let savedPassword = localStorage.getItem('password');
    if (savedPassword) {
        password.value = savedPassword;
    }
};

submit.onclick = function () {
    if (text.value === 'محمد عماد احمد' && password.value === '10203') {
        alert('نعم');
        // حفظ القيم في localStorage
        localStorage.setItem('text', text.value);
        localStorage.setItem('password', password.value);
    } else {
        alert('لا');
    }

    let screenWidth = screen.availWidth;

    if (screenWidth > 1000) {
        alert('فقط الهواتف المحمولة، من فضلك');
    } else {
        alert('الهاتف المحمول المناسب');
    }
};

يستخدم localStorage.setItem(key, value) لحفظ القيم في ذاكرة التخزين المحلية للمتصفح.

وعند تحميل الصفحة، يستخدم localStorage.getItem(key) لاسترداد القيم المحفوظة وتعيينها في حقول الإدخال، وستظل القيمة محفوظة حتى بعد تحديث الصفحة.

يمكنك أيضاً استخدام sessionStorage لفعل ذلك.

الكود:

let submit = document.getElementById('submit');
let text = document.getElementById('text');
let password = document.getElementById('password');

// عرض البيانات المحفوظة عند تحميل الصفحة
window.onload = function() {
    let savedText = sessionStorage.getItem('text');
    if (savedText) {
        text.value = savedText;
    }

    let savedPassword = sessionStorage.getItem('password');
    if (savedPassword) {
        password.value = savedPassword;
    }
};

submit.onclick = function () {
    if (text.value === 'محمد عماد احمد' && password.value === '10203') {
        alert('نعم');
        // حفظ القيم في sessionStorage
        sessionStorage.setItem('text', text.value);
        sessionStorage.setItem('password', password.value);
    } else {
        alert('لا');
    }

    let screenWidth = screen.availWidth;

    if (screenWidth > 1000) {
        alert('فقط الهواتف المحمولة، من فضلك');
    } else {
        alert('الهاتف المحمول المناسب');
    }
};

في هذا المثال، يتم استخدام sessionStorage بدلاً من localStorage لحفظ البيانات. يتم عرض القيم المحفوظة في الحقول عند تحميل الصفحة باستخدام sessionStorage.getItem() بدلاً من localStorage.getItem().

عند النقر على الزر "Submit"، يتم حفظ القيم في sessionStorage بدلاً من localStorage باستخدام sessionStorage.setItem() بدلاً من localStorage.setItem().

مع العمل انه يمكن استخدام كلاً من sessionStorage و localStorage لحفظ البيانات في ذاكرة التخزين المحلية للمتصفح، ولكن هناك بعض الاختلافات الرئيسية بينهما:

1. مدى الصلاحية (Lifetime):

• localStorage: يحفظ البيانات بشكل دائم في ذاكرة التخزين المحلية للمتصفح، حتى بعد إغلاق المتصفح وإعادة فتحه.
• sessionStorage: يحفظ البيانات فقط خلال جلسة المستخدم (عند فتح صفحة الموقع في نافذة المتصفح)، ويتم حذف البيانات تلقائيًا عند إغلاق نافذة المتصفح.

2. المشاركة بين النوافذ (Sharing between windows):

• localStorage: يمكن الوصول إلى البيانات المحفوظة في localStorage من أي نافذة أو علامة تبويب في المتصفح.
• sessionStorage: يتم حفظ البيانات في sessionStorage بشكل منفصل لكل نافذة أو علامة تبويب في المتصفح، ولا يمكن الوصول إلى البيانات في جلسة مختلفة.

يمكنك الوصول إلى القيم المخزنة في sessionStorage من خلال المتصفح (Browser) الخاص بك بسهولة في Google Chrome من خلال الخطوات الأتية:

• افتح صفحة الويب التي تحتوي على sessionStorage.
• انقر بزر الماوس الأيمن في أي مكان على الصفحة واختر "فحص العنصر" (Inspect).
•  ستفتح واجهة مستكشف العناصر (Elements Panel) في الجزء السفلي من الصفحة.
•  انقر فوق علامة التبويب "Application" في أعلى الواجهة.
•  يجب أن ترى "Storage" في القائمة الجانبية اليسرى. انقر فوقها.
• انقر فوق "sessionStorage" لعرض القيم المخزنة فيها.

أنظر هذه الصورة للتوضيح.

أخيرًا، يجب ملاحظة أنه يمكن استخدام كلا من sessionStorage و localStorage بشكل مشابه، ولكن يجب اختيار الخيار الأنسب حسب احتياجات التطبيق المحدد.

يمكنك استخدام localStorage في JavaScript لتخزين البيانات في متصفح الويب والاحتفاظ بها بعد تحديث الصفحة. يليك مثالًا بسيطًا يوضح كيفية تخزين قيمة الاسم واسترجاعها:

// عند النقر على زر الحفظ
function saveData() {
  var name = document.getElementById("name").value; // احصل على قيمة الاسم من حقل الادخال

  localStorage.setItem("name", name); // قم بتخزين قيمة الاسم في localStorage

  alert("تم حفظ الاسم!");
}

// عند تحميل الصفحة
window.onload = function() {
  var name = localStorage.getItem("name"); // استرجع قيمة الاسم من localStorage

  if (name) {
    document.getElementById("name").value = name; // قم بتعيين قيمة الاسم في حقل الادخال
  }
};

في هذا المثال، ستجد عنصرًا HTML بـ id يساوي "name"، وهو حقل إدخال يستخدم لإدخال الاسم. عند النقر على زر الحفظ، سيتم استدعاء دالة saveData() التي تقوم بأخذ قيمة الاسم من حقل الادخال وتخزينها في localStorage باستخدام localStorage.setItem().

عند تحميل الصفحة، ستتم استدعاء دالة onload التي تستعيد قيمة الاسم من localStorage باستخدام localStorage.getItem() وتقوم بتعيينها في حقل الادخال إذا كان هناك قيمة مخزنة بالفعل.

هذا التعليمة البرمجية ستتيح لك الحفاظ على قيمة الاسم بعد تحديث الصفحة.