مشكلة في التعامل مع 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" ووضع تعليق بجانب التابع يشرح عمله فذلك أفضل بكثير.

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

  بتاريخ On 21‏/5‏/2022 at 07:30 قال 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 = [];
}

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

أظهر المزيد  

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

  بتاريخ On 21‏/5‏/2022 at 07:36 قال 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);
  });
}

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

  بتاريخ On 21‏/5‏/2022 at 07:48 قال 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);
  });
}

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

أظهر المزيد  

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

  بتاريخ On 21‏/5‏/2022 at 07:48 قال 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 بعد إجراء التعديلات من نافذة المطور ضمن المتصفح.

  بتاريخ On 21‏/5‏/2022 at 08:54 قال 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 بعد إجراء التعديلات من نافذة المطور ضمن المتصفح.

أظهر المزيد  

لا يعمل

  بتاريخ On 21‏/5‏/2022 at 08:57 قال Mohamed Montaser3:

لا يعمل

أظهر المزيد  

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

to-do-list.zip

  بتاريخ On 21‏/5‏/2022 at 09:01 قال Sam Ahw:

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

to-do-list.zipFetching info...

أظهر المزيد  

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