نقل البيانات بين صفحات HTML

إذا كنت ترغب في نقل القيم بين صفحتي HTML وتعبئة جدول جديد بالبيانات التي تم إضافتها في الصفحة الثانية إلى الصفحة الأولى، فإن هناك عدة طرق لتحقيق ذلك، ومن بينها استخدام تقنيات JavaScript أو تقنيات تخزين البيانات المحلية.

أحد الطرق لتحقيق هذا الهدف هو استخدام تقنية “Query Parameters” أو ما تُعرف أحيانًا بـ “URL Parameters”. يمكنك إرسال البيانات من صفحة إلى أخرى عن طريق إضافة البيانات كمعلمات في عنوان URL ومن ثم استخدام JavaScript لاستخراج هذه المعلمات واستخدامها لتعبئة الجدول في الصفحة الأولى.

في صفحة addNewCards.xhtml، يمكنك تضمين البيانات التي تم إدخالها في عنوان URL عند الانتقال إلى الصفحة الأولى. على سبيل المثال، يمكنك تضمين اسم البطاقة ورقمها كمعلمات في عنوان URL.

htmlCopy code
<a href="manageCards.xhtml?cardName=CardName&cardNumber=123456789">Go back to Manage Cardsa>

ثم يمكنك استخدام JavaScript في صفحة manageCards.xhtml لاستخراج قيم هذه المعلمات من عنوان URL واستخدامها لتعبئة جدول البطاقات.

javascriptCopy code
// استخراج القيم من عنوان URL
const urlParams = new URLSearchParams(window.location.search);
const cardName = urlParams.get('cardName');
const cardNumber = urlParams.get('cardNumber');

// إضافة القيم إلى الجدول
const table = document.getElementById('cardTable');
const newRow = table.insertRow();
const cell1 = newRow.insertCell(0);
const cell2 = newRow.insertCell(1);
cell1.innerHTML = cardName;
cell2.innerHTML = cardNumber;

هذا مثال بسيط عن كيفية نقل القيم بين صفحتي HTML وتعبئة البيانات في الصفحة الأولى باستخدام تقنية “Query Parameters”. يمكنك تطوير هذا النهج لتلبية احتياجات تطبيقك بشكل أفضل، مثل استخدام قواعد بيانات أو تقنيات تخزين المتصفح المحلي مثل LocalStorage أو SessionStorage لتخزين البيانات بشكل دائم أو مؤقت.

بالطبع، هناك المزيد من المعلومات والطرق التي يمكن استخدامها لنقل القيم بين صفحات HTML وتعبئة البيانات في الصفحة الأولى. سأقدم لك بعض الطرق البديلة التي يمكنك استخدامها وتعديلها وفقا لاحتياجات مشروعك:

1. استخدام LocalStorage أو SessionStorage: يمكنك استخدام هذه التقنيات لتخزين البيانات المؤقتة أو الدائمة على جهاز المستخدم. يمكنك تخزين البيانات في صفحة addNewCards.xhtml واسترجاعها في صفحة manageCards.xhtml.

javascriptCopy code
// في صفحة addNewCards.xhtml
localStorage.setItem('cardName', 'CardName');
localStorage.setItem('cardNumber', '123456789');

// في صفحة manageCards.xhtml
const cardName = localStorage.getItem('cardName');
const cardNumber = localStorage.getItem('cardNumber');

2. استخدام Cookies: يمكنك استخدام ملفات الكوكيز لتخزين البيانات واسترجاعها عبر الصفحات.

javascriptCopy code
// في صفحة addNewCards.xhtml
document.cookie = "cardName=CardName";
document.cookie = "cardNumber=123456789";

// في صفحة manageCards.xhtml
const cookies = document.cookie.split(';');
let cardName, cardNumber;
cookies.forEach(cookie => {
    const [name, value] = cookie.split('=');
    if (name.trim() === 'cardName') {
        cardName = value;
    } else if (name.trim() === 'cardNumber') {
        cardNumber = value;
    }
});

3. استخدام قاعدة بيانات: يمكنك استخدام قاعدة بيانات على الخادم لتخزين البيانات والوصول إليها عبر الصفحات باستخدام لغات البرمجة مثل PHP أو Node.js.

phpCopy code
// في صفحة addNewCards.xhtml
// استخدم اللغة PHP لإدراج البيانات في قاعدة البيانات

// في صفحة manageCards.xhtml
// استخدم اللغة PHP لاستعلام قاعدة البيانات واسترداد البيانات

هذه بعض الطرق التي يمكن استخدامها لنقل القيم بين صفحات HTML وتعبئة البيانات في الصفحة الأولى. يمكنك اختيار الطريقة التي تناسب احتياجات مشروعك ومستوى مهارتك في التطوير. تذكر أنه من المهم دائمًا التحقق من أمان وصحة البيانات المرسلة واستقبالها.