كيف أحذف العناصر من النافذة ومن التخزين المحلي ؟

Mohamed Lamin Mahmoudi · 13 يوليو 2022

أريد المساعدة في فكرة الحذف 1

وضعت حالتين الحالة الاولى وهي الحذف بعد ان أضيف كل الملاحظات ثم أحمل الصفحة وأبدأ أحذف العنصر ومن ثم أحمل الصفحة ثم أحذف العنصر الذي بعده ومن ثم اعيد تحميل الصفحة ,نجحت في عمل هذه الحالة.

الحالة الثانية هي الحذف قبل تحميل الصفحة أي يمكنني حذف أي ملاحظة من التخزين المحلي قبل تحميل الصفحة ,لم أستطع أن أطبق هذه الحالة بطريقة صحيحة

 let btn= document.getElementById("add");
    let v =window.localStorage.getItem('value');
    console.log(v);
    let taskform = document.querySelector('.tasks'); 
    let tasks= Array();
    if(!v ){
    }else{
        tasks.push(...(v.split(",")));
    }
    console.log(tasks);
    if(v && v.length!==0){
    for(let i=0;i<tasks.length;i++){
     let mydiv = document.createElement('div');
     mydiv.setAttribute('id',`my-div${i}`);
     let but = document.createElement('button');
     but.setAttribute('id',i);
     but.style.cssText="position: relative;background-color: #d71a0c;color: antiquewhite;border: 0cm;height: 25px;border-radius: 5px;cursor: pointer;left: -31px;top: 14px;width: 62px;"
     let textbut= document.createTextNode("delete");
     but.appendChild(textbut);
     mydiv.style.cssText="background-color: white;width: 179px;height: 25px;top: -12px;position: relative;  left: -108px;border: 0cm;border-radius: 4px;    direction: ltr;text-indent: 5px;"
     mydiv.append(tasks[i]);
     taskform.append(but);
     taskform.append(mydiv);

    }
 }else{  
 }
 
//حدث النقر على إضافة تاسك    
    btn.addEventListener('click',function(e){
          e.preventDefault();
          add();
    });
    btn.addEventListener('click',function(e){
        add();
        e.preventDefault();
        });
       function add(){
      if (document.getElementById("inb").value===""){
                        // التحقق من ما إذا أدخلت قيمة في الحقل أو لا 
      }else{     // جلب القيمة المدخلة في الحقل 
            val= document.getElementById("inb").value;           
               tasks.push(val);
                console.log(tasks);
                // حفظ القيمة في التخزين المحلي 
                window.localStorage.setItem("value",tasks);
               let x=window.localStorage.getItem('value');
                console.log(x); 
                let len = x.split(",").length;
                console.log(len);
                let task=tasks[len-1];
                let mydiv = document.createElement('div');
                mydiv.setAttribute('id',`my-div${len-1}`);
                let but = document.createElement('button');
                but.setAttribute('id',len-1);  
                but.style.cssText="position: relative;background-color: #d71a0c;color: antiquewhite;border: 0cm;height: 25px;border-radius: 5px;cursor: pointer;left: -31px;top: 14px;width: 62px;"
                let textbut= document.createTextNode("delete");
                but.appendChild(textbut);
                mydiv.style.cssText="background-color: white;width: 179px;height: 25px;top: -12px;position: relative;  left: -108px;border: 0cm;border-radius: 4px;    direction: ltr;text-indent: 5px;"
                mydiv.append(task);
                taskform.append(but);
                taskform.append(mydiv);
                console.log(tasks);
                but.onclick=function(){
                    let newarr=x.split(",");
                    let spliced=newarr.splice(len-1,1);
                    window.localStorage.setItem('value',newarr);
                    mydiv.remove();
                    but.remove();
                }
                }
     }

    if( !v || v.length === 0){
        console.log("tasks not found");
    }else{
        let newarr= v.split(',');
         console.log(newarr);
        for(let i=0; i<newarr.length;i++){
            i.toString();
            let del=document.getElementById(`${i}`);
            
            del.addEventListener('click',function(){
             let  de=document.getElementById(`${i}`);
             console.log(newarr);
             //  let va=newarr.splice(i,1);
             let spliced= newarr.splice(i,1);
               
             //  console.log(va);
               console.log(spliced);
              
               window.localStorage.setItem("value",v);
               console.log(v);
               let myd=document.getElementById(`my-div${i}`);
               myd.remove();
               de.remove();
            })
            v=newarr;
        }
    }

Adnane Kadri · 13 يوليو 2022

لحذف العناصر من التخزين المحلي يمكنك الاشارة اليها عن طريق مفتاحها باستعمال التابع removeItem عن الكائن localStorage كـ:

window.localStorage.removeItem('item_key');

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

في مثالك أرى أنك تقوم بتخزين سلسلة نصية من القيم مسندة الى المفتاح value. ولذلك فإن تعيين عنصر جديد في التخزين المحلي سيكون بـ:

جلب قيمة المفتاح value
تجزئة السلسلة النصية الى مجموعة القيم المفصولة بفاصلة ,
تخزين هاته القيم في مصفوفة
اضافة قيم جديدة الى هاته المصفوفة
دمج هاته المصفوفة في سلسلة نصية جديدة تشكل هاته القيم مفصولة بفاصلة ,
اعادة اسناد القيمة الجديدة الى المفتاح value

ثم ان نفس العملية ستكون عند حذف عنصر ما، سوى ان الحذف سيختلف عن الاضافة في المرحلة رقم 4. فنحن سنقوم فيها بازالة العنصر المبين من المصفوفة قبل اعادة دمجها في سلسلة نصية واعادة اسنادها الى المفتاح value.

سيتبع ذلك منطقا مشابها:

/**
* ازالة عنصر موجود بالفعل
*
* @param {string} task_name
* @return void
*/
function removeTask(task_name) {
  let old_value = localStorage.getItem("value"); // c++, php , js
  
  let tasks = old_value.split(",") // [c++, php , js]
  .filter(task => { return task !== task_name }) // فلترة المصفوفة بازالة العنصر المشار اليه
  .join(",") // اعادة التجميع في سلسلة نصية
  
  localStorage.setItem("value" ,tasks) // اعادة اسناد قيمة جديدة
}

/**
* اضافة عنصر جديد
*
* @param {string} task_name
* @return void
*/
function addTask(task_name) {
  let old_value = localStorage.getItem("value"); // c++, php , js
  
  let tasks = old_value.split(",") // [c++, php , js]
  .push(task_name) // اضافة عنصر جديد
  .join(",") // اعادة التجميع في سلسلة نصية
  
  localStorage.setItem("value" ,tasks) // اعادة اسناد قيمة جديدة
}

يمكنك توظيفها في مثالك بحسب حاجتك.

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

تم التعديل في 13 يوليو 2022 بواسطة Adnane Kadri
اصلاح خطأ بالشيفرة

Mohamed Lamin Mahmoudi · 13 يوليو 2022

بتاريخ 4 ساعات قال Adnane Kadri:

لم اجد حدث الحذف مبينا لديك. أظن أنك تحتاج تنظيم الشيفرة أكثر.

هاهي دالة الحذف لدي

if( !v || v.length === 0){
        console.log("tasks not found");
    }else{
        let newarr= v.split(',');
         console.log(newarr);
        for(let i=0; i<newarr.length;i++){
            i.toString();
            let del=document.getElementById(`${i}`);
            
            del.addEventListener('click',function(){
             let  de=document.getElementById(`${i}`);
             console.log(newarr);
             //  let va=newarr.splice(i,1);
             let spliced= newarr.splice(i,1);
               
             //  console.log(va);
               console.log(spliced);
              
               window.localStorage.setItem("value",v);
               console.log(v);
               let myd=document.getElementById(`my-div${i}`);
               myd.remove();
               de.remove();
            })
            v=newarr;
        }
    }

وهي تحذف بطريقة صحيحة لكن يلزمني تحيل الصفحة بعد ان احذف كل عنصر وحيد .

في أي مكان أطبق دالة الحذف التي اقترحتها علي اعلاه بحيث أن أحذف العنصر سواءا بعد إضافته مباشرة أو بعد الاضافة وتحميل الصفحة ومن ثم حذفه ؟

Adnane Kadri · 14 يوليو 2022

بتاريخ 21 ساعات قال Mohamed Lamin Mahmoudi:

هاهي دالة الحذف لدي

وهي تحذف بطريقة صحيحة لكن يلزمني تحيل الصفحة بعد ان احذف كل عنصر وحيد .

في أي مكان أطبق دالة الحذف التي اقترحتها علي اعلاه بحيث أن أحذف العنصر سواءا بعد إضافته مباشرة أو بعد الاضافة وتحميل الصفحة ومن ثم حذفه ؟

يفترض ان تكون عملية الحذف مسندة بشكل ما الى حدث الضغط على زر الحذف. مثل:

button.addEventListener('click' ,function(){
 
    removeTask(this.value) // يمكنك تخزين اسم الاختبار في خاصية ما للزر
 
   
    // باقي شيفرة حذف العنصر من واجهة المستخدم
})

Mohamed Lamin Mahmoudi · 15 يوليو 2022

بتاريخ 21 ساعات قال Adnane Kadri:
يفترض ان تكون عملية الحذف مسندة بشكل ما الى حدث الضغط على زر الحذف. مثل:
button.addEventListener('click' ,function(){
 
    removeTask(this.value) // يمكنك تخزين اسم الاختبار في خاصية ما للزر
 
   
    // باقي شيفرة حذف العنصر من واجهة المستخدم
})

طبقت هذه العملية لكن المشكلة أنها لاتتم بطريقة صحيحة إلا بعد تحميلي للصفحة بعد كل مرة

 if( !v || v.length === 0){
     console.log("tasks not found");
    }else{
    let newarr= v.split(',');
    console.log(newarr);
     for(let i=0; i<newarr.length;i++){
        i.toString();
        let del=document.getElementById(`${i}`);
        del.addEventListener('click',function(){
         let  de=document.getElementById(`${i}`);
         let myd=document.getElementById(`my-div${i}`);
        let va=newarr.splice(i,1);
        removeTask(va.join(''));
        myd.remove();
        de.remove();
        });
        }
    }

كيف أحذف العناصر من النافذة ومن التخزين المحلي ؟

السؤال

Mohamed Lamin Mahmoudi

4 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

Mohamed Lamin Mahmoudi

Adnane Kadri

Mohamed Lamin Mahmoudi

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية