مشكلة في التعامل مع local storage في جافاسكريبت

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

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

من بعض الملاحظات التي وجدتها هي أنك قمت بتعريف متغيّر arrayOfTasks في بداية الشيفرة البرمجية باستخدام let، ومع ذلك تقوم بإعادة تعريفه من جديد ضمن التوابع، وهذا خطأ كون المتغيّر مسؤول عن التعامل مع البيانات في local storage:

let arrayOfTasks;


function getArrayOfTasksFromLocalStorageAndReturnItInDom() {

  let arrayOfTasks = JSON.parse(localStorage.getItem("arrayOfTasks"));

  arrayOfTasks.forEach((task) => {
    let div = document.createElement("div");
    div.className = "task";
    div.appendChild(document.createTextNode(task.title));
    tasksDiv.prepend(div);
  });
}

يمكنك استخدام var في بداية الملف والوصول إلى المتغيّر ضمن التوابع لاحقاً.

كما لاحظت أنه عند تحميل الصفحة لا يتم استعادة البيانات مع العلم أنها محفوظة ضمن local storage، لذلك يمكنك تغيير الكود الموجود هنا ليصبح كالتالي:

if (window.localStorage.length > 0) {
  arrayOfTasks = JSON.parse(window.localStorage.getItem("arrayOfTasks")); // هنا يتم فقط حفظ البيانات ضمن المتحول دون إظهارها
  getArrayOfTasksFromLocalStorageAndReturnItInDom(); // يمكنك استدعاء التابع الموجود لديك وسيقوم بإظهارها على الشاشة
} else {
  arrayOfTasks = [];
}

كما أنصحك بالابتعاد عن تسمية التوابع الطويلة "getArrayOfTasksFromLocalStorageAndReturnItInDom" التي قد تسبب لك أخطاء إملائية عند إعادة كتابة اسم التابع لاحقاً في أماكن مختلفة في الشيفرة البرمجية، ويمكنك مثلاً استبدال الاسم بـ: "getTasksArray" ووضع تعليق بجانب التابع يشرح عمله فذلك أفضل بكثير.

وبقية الخصائص أراها تعمل بشكل سليم كما أن تنسيق الصفحة لديك ممتاز ومتجاوب مع جميع الشاشات، تابع المشروع وحاول إضافة آلية الحذف والبحث عن عنوان مهمّة محددة.

بتاريخ 4 دقائق مضت قال Sam Ahw:

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

أرى من مشروعك أنك قمت بتطبيق بعض الآليات بشكل صحيح مثل استخدام local storage والتعامل مع المصفوفات.

من بعض الملاحظات التي وجدتها هي أنك قمت بتعريف متغيّر arrayOfTasks في بداية الشيفرة البرمجية باستخدام let، ومع ذلك تقوم بإعادة تعريفه من جديد ضمن التوابع، وهذا خطأ كون المتغيّر مسؤول عن التعامل مع البيانات في local storage:

let arrayOfTasks;


function getArrayOfTasksFromLocalStorageAndReturnItInDom() {

  let arrayOfTasks = JSON.parse(localStorage.getItem("arrayOfTasks"));

  arrayOfTasks.forEach((task) => {
    let div = document.createElement("div");
    div.className = "task";
    div.appendChild(document.createTextNode(task.title));
    tasksDiv.prepend(div);
  });
}

يمكنك استخدام var في بداية الملف والوصول إلى المتغيّر ضمن التوابع لاحقاً.

كما لاحظت أنه عند تحميل الصفحة لا يتم استعادة البيانات مع العلم أنها محفوظة ضمن local storage، لذلك يمكنك تغيير الكود الموجود هنا ليصبح كالتالي:

if (window.localStorage.length > 0) {
  arrayOfTasks = JSON.parse(window.localStorage.getItem("arrayOfTasks")); // هنا يتم فقط حفظ البيانات ضمن المتحول دون إظهارها
  getArrayOfTasksFromLocalStorageAndReturnItInDom(); // يمكنك استدعاء التابع الموجود لديك وسيقوم بإظهارها على الشاشة
} else {
  arrayOfTasks = [];
}

وبقية الخصائص أراها تعمل بشكل سليم، تابع المشروع وحاول إضافة آلية الحذف والبحث عن عنوان مهمّة محددة.

عندما اضغط علي زر الاضافه لا يحدث شيء

بتاريخ 8 دقائق مضت قال Mohamed Montaser3:

عندما اضغط علي زر الاضافه لا يحدث شيء

قم بتطبيق النصائح التي ذكرتها ولك، والأهم إزالة إعادة تعريف المتغيّر ضمن التوابع:

function getArrayOfTasksFromLocalStorageAndReturnItInDom() {

  let arrayOfTasks = JSON.parse(localStorage.getItem("arrayOfTasks")); //سبق وعرّفت هذا المتغيّر في أعلى الصفحة

  arrayOfTasks.forEach((task) => {
    let div = document.createElement("div");
    div.className = "task";
    div.appendChild(document.createTextNode(task.title));
    tasksDiv.prepend(div);
  });
}

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

بتاريخ 2 دقائق مضت قال Sam Ahw:

قم بتطبيق النصائح التي ذكرتها ولك، والأهم إزالة إعادة تعريف المتغيّر ضمن التوابع:

function getArrayOfTasksFromLocalStorageAndReturnItInDom() {

  let arrayOfTasks = JSON.parse(localStorage.getItem("arrayOfTasks")); //سبق وعرّفت هذا المتغيّر في أعلى الصفحة

  arrayOfTasks.forEach((task) => {
    let div = document.createElement("div");
    div.className = "task";
    div.appendChild(document.createTextNode(task.title));
    tasksDiv.prepend(div);
  });
}

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

ما هو هذا الشرط وفي اي داله

بتاريخ 22 دقائق مضت قال Sam Ahw:

قم بتطبيق النصائح التي ذكرتها ولك، والأهم إزالة إعادة تعريف المتغيّر ضمن التوابع:

function getArrayOfTasksFromLocalStorageAndReturnItInDom() {

  let arrayOfTasks = JSON.parse(localStorage.getItem("arrayOfTasks")); //سبق وعرّفت هذا المتغيّر في أعلى الصفحة

  arrayOfTasks.forEach((task) => {
    let div = document.createElement("div");
    div.className = "task";
    div.appendChild(document.createTextNode(task.title));
    tasksDiv.prepend(div);
  });
}

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

.

قم بتعديل الكود الموجود ضمن التابع "getArrayOfTasksFromLocalStorageAndReturnItInDom" ليتم المرور على المحتوى التصي الموجود في العناصر الأبناء والتأكد من عدم وجوده مسبقاً قبل إضافته، بذلك ستتجنب التكرار ويصبح الكود كالتالي:

function getArrayOfTasksFromLocalStorageAndReturnItInDom() {
  arrayOfTasks.forEach((task) => {
    if (
      (document.documentElement.textContent || document.documentElement.innerText).indexOf(task.title) == -1
    ) {
    let div = document.createElement("div");
    div.className = "task";
    div.appendChild(document.createTextNode(task.title));
    tasksDiv.prepend(div);
    }
    
  });
}

تأكد من أن تقوم بحذف محتوى local storage بعد إجراء التعديلات من نافذة المطور ضمن المتصفح.

بتاريخ 2 دقائق مضت قال Sam Ahw:

قم بتعديل الكود الموجود ضمن التابع "getArrayOfTasksFromLocalStorageAndReturnItInDom" ليتم المرور على المحتوى التصي الموجود في العناصر الأبناء والتأكد من عدم وجوده مسبقاً قبل إضافته، بذلك ستتجنب التكرار ويصبح الكود كالتالي:

function getArrayOfTasksFromLocalStorageAndReturnItInDom() {
  arrayOfTasks.forEach((task) => {
    if (
      (document.documentElement.textContent || document.documentElement.innerText).indexOf(task.title) == -1
    ) {
    let div = document.createElement("div");
    div.className = "task";
    div.appendChild(document.createTextNode(task.title));
    tasksDiv.prepend(div);
    }
    
  });
}

تأكد من أن تقوم بحذف محتوى local storage بعد إجراء التعديلات من نافذة المطور ضمن المتصفح.

لا يعمل

بتاريخ 1 دقيقة مضت قال Mohamed Montaser3:

لا يعمل

لم تقم بتطبيق التعديلات إذاً. أرفق لك ملفات المشروع وصورة عن النتيجة

to-do-list.zip

بتاريخ 9 ساعات قال Sam Ahw:

لم تقم بتطبيق التعديلات إذاً. أرفق لك ملفات المشروع وصورة عن النتيجة

to-do-list.zip

لقد عملت ولاكن انا لا افهم الشرط