اذهب إلى المحتوى
  • 0

كيف أستطيع جلب task من array موجودة في localstorage ووضعها في dom باستخدام جافاسكريبت

منتصر احمد

السؤال

هناك مشكله صغيره تقابلني وهي اني عندما اجلب الtask من ال array اللي في localstorage  ووضعها في ال dom عندما اعمل refresh يقوم بمسحها مع انني قمت باستدعائها بالطريقه الصحيحه

كود ال js 

// declare variables
let add = document.querySelector("#add");
let input = document.querySelector("#input");
let outputList = document.querySelector("#list");
var arrayOfTasks = [];

// window.localStorage.clear();
if (window.localStorage.getItem("array")) {
  arrayOfTasks = JSON.parse(window.localStorage.array);
}

add.onclick = function () {
  if (input.value !== "") {
    createFn(input.value);
    readFn();
    // deleteFn();

    // remove value from input
    input.value = "";
  }
};

// createFunction

function createFn(textValue) {
  // setp 1 = create Task
  const task = {
    title: textValue,
    complate: false,
  };
  // setp 2 = add task to arrayOfTasks
  arrayOfTasks.push(task);
  // step 3 = add arrayOfTasks to localStorage
  window.localStorage.setItem("array", JSON.stringify(arrayOfTasks));
}

// readFunction

function readFn() {
  let arrayOfTasks = JSON.parse(window.localStorage.getItem("array"));
  arrayOfTasks.forEach((task) => {
    let li = document.createElement("li");
    let span = document.createElement("span");
    span.appendChild(document.createTextNode("delete"));
    li.appendChild(document.createTextNode(task.title));
    li.appendChild(span);
    outputList.appendChild(li);
  });
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

لاحظت مشكلتين بالكود الذي شاركته

  1. الاولى أنك تقوم بجلب العناصر ووضعهم في المتغير arrayOfTasks لكن لا تقوم بتشغيل الوظيفة المسؤولة عن العرض readFn.
    if (window.localStorage.getItem("array")) {
      arrayOfTasks = JSON.parse(window.localStorage.array);
    }

    ولكن الصحيح ان يكون بالشكل التالي :
     

    if (window.localStorage.getItem("array")) {
      readFn();
    }


     

  2. والمشكلة الثانية انك تقوم بإضافة كل العناصر الموجودة في ال localStorage مرة ثاني عند كل اضافة لعنصر جديد بحيث يحدث تكرار للعناصر المضافة مسبقاً، والصحيح ان تمسح محتويات ال outputList قبل إضافة العناصر حتى لا يحدث هذا التكرار ويكون بالشكل التالي : 
     

    function readFn() {
      // نقوم بتفريغ القائمة
      outputList.innerHTML = "";
      //   ثم نقوم بإضافة كل العناصر الموجودة بالمصفوفة لتجنب التكرار
      let arrayOfTasks = JSON.parse(window.localStorage.getItem("array"));
      arrayOfTasks.forEach((task) => {
        let li = document.createElement("li");
        let span = document.createElement("span");
        span.appendChild(document.createTextNode("delete"));
        li.appendChild(document.createTextNode(task.title));
        li.appendChild(span);
        outputList.appendChild(li);
      });
    }

    لتحميل الحل من هنا : fix.js

تم التعديل في بواسطة عمر قره محمد
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 4 ساعات قال عمر قره محمد:

لاحظت مشكلتين بالكود الذي شاركته

  1. الاولى أنك تقوم بجلب العناصر ووضعهم في المتغير arrayOfTasks لكن لا تقوم بتشغيل الوظيفة المسؤولة عن العرض readFn.
    
    if (window.localStorage.getItem("array")) {
      arrayOfTasks = JSON.parse(window.localStorage.array);
    }

    ولكن الصحيح ان يكون بالشكل التالي :
     

    
    if (window.localStorage.getItem("array")) {
      readFn();
    }


     

  2. والمشكلة الثانية انك تقوم بإضافة كل العناصر الموجودة في ال localStorage مرة ثاني عند كل اضافة لعنصر جديد بحيث يحدث تكرار للعناصر المضافة مسبقاً، والصحيح ان تمسح محتويات ال outputList قبل إضافة العناصر حتى لا يحدث هذا التكرار ويكون بالشكل التالي : 
     

    
    function readFn() {
      // نقوم بتفريغ القائمة
      outputList.innerHTML = "";
      //   ثم نقوم بإضافة كل العناصر الموجودة بالمصفوفة لتجنب التكرار
      let arrayOfTasks = JSON.parse(window.localStorage.getItem("array"));
      arrayOfTasks.forEach((task) => {
        let li = document.createElement("li");
        let span = document.createElement("span");
        span.appendChild(document.createTextNode("delete"));
        li.appendChild(document.createTextNode(task.title));
        li.appendChild(span);
        outputList.appendChild(li);
      });
    }

    لتحميل الحل من هنا : fix.js

اليس هذا الكود لمسح المحتي الذي بداخل ال output :
outputList.innerHTML = "";

هل يمكنك شرحه اكتر مفضلك

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 ساعات قال Mohamed Montaser3:

اليس هذا الكود لمسح المحتي الذي بداخل ال output :
outputList.innerHTML = "";

هل يمكنك شرحه اكتر مفضلك

نعم بالفعل هو كود لمحي محتويات ال output. 

جرب إيقاف هذا الكود وانظر ما الفرق الذي سيحدث. 

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

جرب إيقاف الوظيفة بشكل عملي وشاهد المشكلة بنفسك. 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...