99- آموزش جاوااسکریپت | پروژه عملی: قسمت 12 از 12- هماهنگ‌سازی Update، Delete و Clear All با Local Storage در اپلیکیشن مدیریت کالری

در بخش قبل، قابلیت ذخیره آیتم‌ها در localStorage را پیاده‌سازی کردیم و همچنین داده‌ها را هنگام شروع برنامه از همان‌جا دریافت کردیم.
با این حال، هنوز یک مشکل مهم باقی مانده است: اگر آیتمی را ویرایش یا حذف کنیم، تغییر فقط در رابط کاربری اعمال می‌شود و پس از رفرش صفحه، داده‌ها به وضعیت قبلی برمی‌گردند.

برای حل این مشکل، باید عملیات Update، Delete و Clear All را نیز با localStorage هماهنگ کنیم.

---

به‌روزرسانی آیتم در localStorage

وقتی کاربر یک آیتم را ویرایش می‌کند، نسخه جدید آن باید علاوه بر داده‌های برنامه و رابط کاربری، در localStorage هم ذخیره شود.

بهترین محل برای این کار، داخل تابع itemUpdateSubmit و درست قبل از پاک‌کردن حالت ویرایش است.

فراخوانی متد ذخیره‌سازی هنگام ویرایش

StorageController.updateItemStorage(updatedItem);

نمونه استفاده در تابع itemUpdateSubmit

const itemUpdateSubmit = function (e) {
  e.preventDefault();

  const input = UIController.getItemInput();

  if (input.name !== '' && input.calories !== '') {
    const updatedItem = ItemController.updateItem(input.name, input.calories);

    UIController.updateListItem(updatedItem);

    const totalCalories = ItemController.getTotalCalories();
    UIController.showTotalCalories(totalCalories);

    StorageController.updateItemStorage(updatedItem);

    UIController.clearEditState();
  }
};

---

ساخت متد updateItemStorage

در این متد باید:

1. آیتم‌های فعلی را از localStorage بخوانیم
2. روی آن‌ها پیمایش کنیم
3. آیتمی را که شناسه یکسان دارد پیدا کنیم
4. مقدار قبلی را با نسخه به‌روزشده جایگزین کنیم
5. آرایه جدید را دوباره در localStorage ذخیره کنیم

updateItemStorage: function (updatedItem) {
  let items = JSON.parse(localStorage.getItem('items'));

  items.forEach(function (item, index) {
    if (updatedItem.id === item.id) {
      items.splice(index, 1, updatedItem);
    }
  });

  localStorage.setItem('items', JSON.stringify(items));
}

---

توضیح منطق updateItemStorage

در این متد:

• با JSON.parse() داده‌های ذخیره‌شده از حالت رشته به آرایه تبدیل می‌شوند
• با forEach همه آیتم‌ها بررسی می‌شوند
• اگر id آیتم ذخیره‌شده با id آیتم ویرایش‌شده یکسان باشد، با splice جایگزین می‌شود
• در پایان، آرایه به‌روزشده دوباره با JSON.stringify() در localStorage ذخیره می‌شود

---

نتیجه ویرایش پایدار

بعد از اضافه‌کردن این متد، اگر یک آیتم را ویرایش کنید:

• مقدار جدید در رابط کاربری نمایش داده می‌شود
• مجموع کالری‌ها به‌روزرسانی می‌شود
• با رفرش صفحه، مقدار جدید حفظ خواهد شد

---

حذف آیتم از localStorage

مرحله بعدی، هماهنگ‌کردن حذف آیتم با localStorage است.
در حال حاضر اگر یک آیتم را حذف کنیم، فقط از داده‌های برنامه و DOM حذف می‌شود. در نتیجه بعد از رفرش صفحه، دوباره از localStorage خوانده می‌شود و برمی‌گردد.

برای جلوگیری از این مشکل، باید هنگام حذف، همان آیتم را از localStorage هم پاک کنیم.

فراخوانی متد حذف از localStorage

StorageController.deleteItemFromStorage(currentItem.id);

نمونه استفاده در تابع itemDeleteSubmit

const itemDeleteSubmit = function (e) {
  e.preventDefault();

  const currentItem = ItemController.getCurrentItem();

  ItemController.deleteItem(currentItem.id);
  UIController.deleteListItem(currentItem.id);

  const totalCalories = ItemController.getTotalCalories();
  UIController.showTotalCalories(totalCalories);

  StorageController.deleteItemFromStorage(currentItem.id);

  UIController.clearEditState();
};

---

ساخت متد deleteItemFromStorage

این متد بسیار شبیه به متد ویرایش است. تفاوت اینجاست که دیگر نیازی به جایگزینی آیتم نداریم و فقط باید آیتم موردنظر را حذف کنیم.

deleteItemFromStorage: function (id) {
  let items = JSON.parse(localStorage.getItem('items'));

  items.forEach(function (item, index) {
    if (id === item.id) {
      items.splice(index, 1);
    }
  });

  localStorage.setItem('items', JSON.stringify(items));
}

---

توضیح منطق حذف

در این متد:

• آرایه آیتم‌ها از localStorage خوانده می‌شود
• با forEach روی همه آیتم‌ها پیمایش انجام می‌شود
• اگر id آیتم فعلی با شناسه ورودی برابر باشد، با splice(index, 1) حذف می‌شود
• در پایان، آرایه جدید دوباره در localStorage ذخیره می‌شود

---

نتیجه حذف پایدار

بعد از این تغییر، وقتی یک آیتم حذف شود:

• از داده‌های برنامه حذف می‌شود
• از رابط کاربری حذف می‌شود
• از localStorage نیز پاک می‌شود

در نتیجه بعد از رفرش صفحه، آیتم حذف‌شده دوباره نمایش داده نخواهد شد.

---

پاک‌کردن همه آیتم‌ها از localStorage

آخرین بخش موردنیاز، هماهنگ‌سازی دکمه Clear All با localStorage است.

در نسخه فعلی، این دکمه فقط آیتم‌ها را از رابط کاربری و آرایه اصلی حذف می‌کند. به همین دلیل بعد از رفرش صفحه، همه آیتم‌ها دوباره بازمی‌گردند.
برای حل این مشکل، کافی است کلید items را از localStorage حذف کنیم.

ساخت متد clearItemsFromStorage

clearItemsFromStorage: function () {
  localStorage.removeItem('items');
}

---

فراخوانی متد در clearAllItemsClick

این متد باید در تابع مربوط به پاک‌کردن همه آیتم‌ها فراخوانی شود.

const clearAllItemsClick = function () {
  ItemController.clearAllItems();
  UIController.removeItems();

  const totalCalories = ItemController.getTotalCalories();
  UIController.showTotalCalories(totalCalories);

  StorageController.clearItemsFromStorage();

  UIController.hideList();
};

---

نسخه کامل StorageController

اکنون StorageController تمام عملیات اصلی مربوط به ذخیره‌سازی را پوشش می‌دهد:

• ذخیره آیتم جدید
• دریافت آیتم‌ها
• به‌روزرسانی آیتم
• حذف آیتم
• پاک‌کردن همه آیتم‌ها

const StorageController = (function () {
  return {
    storeItem: function (item) {
      let items;

      if (localStorage.getItem('items') === null) {
        items = [];
        items.push(item);
        localStorage.setItem('items', JSON.stringify(items));
      } else {
        items = JSON.parse(localStorage.getItem('items'));
        items.push(item);
        localStorage.setItem('items', JSON.stringify(items));
      }
    },

    getItemsFromStorage: function () {
      let items;

      if (localStorage.getItem('items') === null) {
        items = [];
      } else {
        items = JSON.parse(localStorage.getItem('items'));
      }

      return items;
    },

    updateItemStorage: function (updatedItem) {
      let items = JSON.parse(localStorage.getItem('items'));

      items.forEach(function (item, index) {
        if (updatedItem.id === item.id) {
          items.splice(index, 1, updatedItem);
        }
      });

      localStorage.setItem('items', JSON.stringify(items));
    },

    deleteItemFromStorage: function (id) {
      let items = JSON.parse(localStorage.getItem('items'));

      items.forEach(function (item, index) {
        if (id === item.id) {
          items.splice(index, 1);
        }
      });

      localStorage.setItem('items', JSON.stringify(items));
    },

    clearItemsFromStorage: function () {
      localStorage.removeItem('items');
    }
  };
})();

---

جمع‌بندی نهایی پروژه

با اضافه‌شدن این بخش، اپلیکیشن مدیریت کالری اکنون تمام عملیات اصلی CRUD را به‌صورت کامل و پایدار پشتیبانی می‌کند:

• Create برای افزودن آیتم جدید
• Read برای خواندن آیتم‌ها از localStorage
• Update برای ویرایش و ذخیره پایدار تغییرات
• Delete برای حذف یک آیتم
• Clear All برای پاک‌کردن همه آیتم‌ها

در این پروژه، همه بخش‌ها با Vanilla JavaScript پیاده‌سازی شده‌اند؛ بدون استفاده از کتابخانه‌ها، فریم‌ورک‌ها یا ابزارهای Build.
این موضوع باعث می‌شود منطق DOM، مدیریت داده و کار با localStorage را به‌صورت عمیق‌تر درک کنید.

---

ایده‌هایی برای توسعه بیشتر

اگر بخواهید این پروژه را گسترش دهید، می‌توانید قابلیت‌های زیر را به آن اضافه کنید:

• ثبت تاریخ برای هر وعده غذایی
• دسته‌بندی وعده‌ها بر اساس روز
• محاسبه کالری روزانه
• فیلتر یا جست‌وجوی آیتم‌ها
• اتصال به API به‌جای localStorage
• استفاده از fetch برای ذخیره داده‌ها در یک بک‌اند واقعی

این توسعه‌ها می‌توانند پروژه را به یک اپلیکیشن کامل‌تر و کاربردی‌تر تبدیل کنند.