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

منتصر احمد · 26 مايو 2022

هناك مشكله صغيره تقابلني وهي اني عندما اجلب ال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);
  });
}

عمر قره محمد · 26 مايو 2022

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

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

والمشكلة الثانية انك تقوم بإضافة كل العناصر الموجودة في ال 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

تم التعديل في 26 مايو 2022 بواسطة عمر قره محمد

منتصر احمد · 26 مايو 2022

بتاريخ 4 ساعات قال عمر قره محمد:
لاحظت مشكلتين بالكود الذي شاركته
الاولى أنك تقوم بجلب العناصر ووضعهم في المتغير arrayOfTasks لكن لا تقوم بتشغيل الوظيفة المسؤولة عن العرض readFn.
if (window.localStorage.getItem("array")) {
  arrayOfTasks = JSON.parse(window.localStorage.array);
}
ولكن الصحيح ان يكون بالشكل التالي :
if (window.localStorage.getItem("array")) {
  readFn();
}
والمشكلة الثانية انك تقوم بإضافة كل العناصر الموجودة في ال 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 = "";

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

عمر قره محمد · 26 مايو 2022

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

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

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

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

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

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

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

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

السؤال

منتصر احمد

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

Recommended Posts

عمر قره محمد

منتصر احمد

عمر قره محمد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية