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

The issue in your code is that you are not setting the selected option in the dropdown based on the value stored in the local storage. Here’s how you can modify your code to achieve this:

1. Retrieve the value from local storage and store it in a variable.
2. Loop through each option in the select element and set the selected attribute for the option that matches the value from local storage.

Here’s the modified code:

htmlCopy code
<select name="category" id="category" class="form-control ddplaceholder" style="width:220px;font-size:18px;font-family:Roboto;" onchange="document.form.submit();">
    <script>
        var cat = localStorage.getItem('category');
        if (cat) {
            document.getElementById('category').value = cat;
        }
    script>
    <option value="" disabled selected>Select Categoryoption>
    prepare('Select name From category');
    $sth->execute();
    $data = $sth->fetchAll();   
    foreach ($data as $row ){
        if($row['name']!="")
            echo ''.$row['name'].'';
    }
    ?> 
select>

This code will set the selected option in the dropdown based on the value stored in the local storage. If the value is not found in the local storage, it will default to the “Select Category” option.

لحل المشكلة، يجب عليك أن تقوم بتعديل القيمة المختارة في القائمة المنسدلة بناءً على القيمة المُخزنة في التخزين المحلي. يمكنك القيام بذلك عبر إضافة خاصية selected للخيار المُختار بناءً على قيمة category التي تم استرجاعها من التخزين المحلي.

هناك بعض النقاط التي يجب مراعاتها في الكود:

1. يجب أن يكون لديك عنصر نموذج

   يحتوي على القائمة المنسدلة.
2. يجب أن تقوم بتحديث قيمة الخيارات في القائمة المنسدلة بناءً على القيمة المُخزنة.
3. يجب أن تتأكد من أن اسم النموذج في النموذج
هو “form” لكي يتم إعادة تقديم النموذج بشكل صحيح.

يمكنك تحقيق هذه النقاط من خلال تعديل الكود كما يلي:

htmlCopy code
<form name="form" method="post" action="">
    <select name="category" id="category" class="form-control ddplaceholder" style="width:220px;font-size:18px;font-family:Roboto;" onchange="document.form.submit();">
        <script>
            var cat = localStorage.getItem('category');
            if (cat) {
                document.getElementById('category').value = cat;
            }
        script>
        <option value="" disabled selected>Select Categoryoption>
        prepare('Select name From category');
        $sth->execute();
        $data = $sth->fetchAll();   
        foreach ($data as $row ){
            if($row['name']!="")
                echo ''.$row['name'].'';
        }
        ?> 
    select>
form>

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

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

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

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

javascriptCopy code
let message = "مرحبًا بك في عالم JavaScript";
let number = 42;

تتيح لك JavaScript أيضًا التحكم في تدفق البرنامج باستخدام الهياكل التحكمية مثل الشروط والحلقات. يمكنك استخدام الشروط لاتخاذ قرارات بناءً على قيم متغيرة معينة، واستخدام الحلقات لتكرار تنفيذ قطعة من الكود عدة مرات. على سبيل المثال:

javascriptCopy code
if (number > 50) {
    console.log("الرقم أكبر من 50");
} else {
    console.log("الرقم أصغر من أو يساوي 50");
}

بالإضافة إلى ذلك، تدعم JavaScript الدوال، وهي قطع من الكود التي يمكنك تعريفها لأداء مهمة معينة. يمكنك استدعاء الدوال واستخدامها في أماكن مختلفة في برنامجك. على سبيل المثال:

javascriptCopy code
function greet(name) {
    return "مرحبًا, " + name + "!";
}

let greeting = greet("أحمد");
console.log(greeting);

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

هناك العديد من المكتبات والإطارات المبنية على JavaScript مثل React وAngular وVue.js التي تسهل على المطورين بناء تطبيقات واجهة المستخدم الحديثة والديناميكية.

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

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

1. الأشياء والتوجيه (Objects and Oriented Programming):

JavaScript تعتمد على نمط البرمجة الشيئية (OOP)، مما يعني أن المفهوم الأساسي فيها هو الكائنات. يمكنك إنشاء واستخدام الكائنات لتنظيم وترتيب الكود بطريقة منظمة. على سبيل المثال:

javascriptCopy code
// تعريف الكائن
let person = {
    name: "أحمد",
    age: 25,
    job: "مطور"
};

// الوصول إلى خصائص الكائن
console.log(person.name); // يطبع: أحمد

2. الوعود (Promises) والاستدعاءات (Callbacks):

JavaScript يعتمد بشكل كبير على الوعود لإدارة العمليات الغير متزامنة مثل استرجاع البيانات من الخوادم أو التعامل مع الحدث. يتم استخدام الاستدعاءات لضمان تنفيذ الكود بعد اكتمال العملية الغير متزامنة. على سبيل المثال:

javascriptCopy code
// الاستدعاء باستخدام الوعد
function fetchData() {
    return new Promise((resolve, reject) => {
        // تحاكي اكتمال العملية بنجاح
        setTimeout(() => resolve("البيانات تم استرجاعها بنجاح"), 2000);
    });
}

// استخدام الوعد
fetchData()
    .then(data => console.log(data)) // يطبع: البيانات تم استرجاعها بنجاح
    .catch(error => console.error(error));

3. المعالجة الجماعية (Asynchronous Programming):

JavaScript يقدم العديد من الوسائل للتعامل مع الأكواد الغير متزامنة بشكل فعال، مثل async/await، والتي تجعل الكود يبدو وكأنه متزامن على الرغم من أنه يعمل في الخلفية بشكل غير متزامن. على سبيل المثال:

javascriptCopy code
// async/await
async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('حدث خطأ: ', error);
    }
}

fetchData();

4. التخزين المحلي (Local Storage):

JavaScript يوفر وسيلة لتخزين البيانات المحلية في متصفح المستخدم باستخدام Local Storage. يمكن استخدامها للحفاظ على بيانات صغيرة تحتفظ بين جلسات التصفح. على سبيل المثال:

javascriptCopy code
// حفظ البيانات في Local Storage
localStorage.setItem('username', 'Ahmed');

// الحصول على البيانات من Local Storage
let username = localStorage.getItem('username');
console.log(username); // يطبع: Ahmed

5. الاستجابة العريضة (CORS):

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

6. مكتبات وإطارات (Libraries and Frameworks):

هناك العديد من المكتبات والإطارات المتاحة التي تسهل على المطورين استخدام JavaScript بشكل فعّال، مثل jQuery وReact وAngular وVue.js. كل منها يأتي بميزاته الفريدة ويعزز تطوير واجهة المستخدم وتنظيم الكود.

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