98- آموزش جاوااسکریپت | پروژه عملی: قسمت 11 از 12- ذخیره‌سازی داده‌ها در Local Storage در اپلیکیشن مدیریت کالری

تا این مرحله، اپلیکیشن از نظر رابط کاربری و مدیریت آیتم‌ها کامل شده است؛ اما یک مشکل مهم هنوز باقی مانده است. داده‌ها فقط در حافظه موقت برنامه نگهداری می‌شوند و با رفرش صفحه یا بازگشت دوباره به اپلیکیشن، همه اطلاعات از بین می‌روند.

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

---

ایجاد StorageController

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

const StorageController = (function () {
  return {
    storeItem: function (item) {

    }
  };
})();

---

اتصال StorageController به App Controller

بعد از ساخت کنترلر ذخیره‌سازی، باید آن را مانند ItemController و UIController به ماژول اصلی برنامه تزریق کنیم.

const App = (function (ItemController, StorageController, UIController) {

})(ItemController, StorageController, UIController);

---

ذخیره آیتم جدید در localStorage

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

بهترین محل برای این کار، داخل تابع itemAddSubmit و بعد از ساخت آیتم جدید است.

StorageController.storeItem(newItem);

نمونه استفاده در تابع افزودن آیتم:

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

  const input = UIController.getItemInput();

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

    UIController.addListItem(newItem);
    UIController.showTotalCalories(ItemController.getTotalCalories());

    StorageController.storeItem(newItem);

    UIController.clearInput();
  }
};

---

نکته مهم درباره localStorage

localStorage فقط می‌تواند رشته‌ها را ذخیره کند. بنابراین اگر بخواهیم آرایه‌ای از آبجکت‌ها را در آن نگه داریم، باید:

• قبل از ذخیره، داده را با JSON.stringify() به رشته تبدیل کنیم
• بعد از خواندن، داده را با JSON.parse() دوباره به آرایه یا آبجکت تبدیل کنیم

---

پیاده‌سازی متد storeItem

در این متد باید بررسی کنیم که آیا کلید items در localStorage وجود دارد یا نه:

• اگر وجود نداشت، یک آرایه خالی می‌سازیم و آیتم جدید را به آن اضافه می‌کنیم
• اگر وجود داشت، آیتم‌های قبلی را می‌خوانیم، آیتم جدید را به آن‌ها اضافه می‌کنیم و دوباره در localStorage ذخیره می‌کنیم

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));
      }
    }
  };
})();

---

منطق متد storeItem

این متد به شکل زیر عمل می‌کند:

• با localStorage.getItem('items') بررسی می‌شود که داده‌ای از قبل ذخیره شده است یا نه
• اگر داده‌ای وجود نداشته باشد، یک آرایه خالی ساخته می‌شود
• آیتم جدید به آرایه اضافه می‌شود
• در پایان، کل آرایه با JSON.stringify() در localStorage ذخیره می‌شود

اگر داده‌ای از قبل وجود داشته باشد:

• مقدار ذخیره‌شده با JSON.parse() به آرایه تبدیل می‌شود
• آیتم جدید به انتهای آرایه اضافه می‌شود
• آرایه به‌روزشده دوباره در localStorage ذخیره می‌شود

---

بررسی نتیجه در مرورگر

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

ساختار ذخیره‌شده به این صورت خواهد بود:

[
  {
    id: 0,
    name: 'Steak Dinner',
    calories: 1100
  }
]

---

ساخت متد دریافت آیتم‌ها از localStorage

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

برای این کار، متدی به نام getItemsFromStorage ایجاد می‌کنیم.

getItemsFromStorage: function () {
  let items;

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

  return items;
}

---

نسخه کامل StorageController

در این مرحله، کنترلر ذخیره‌سازی شامل دو متد اصلی خواهد بود:

• storeItem برای ذخیره آیتم جدید
• getItemsFromStorage برای خواندن آیتم‌ها هنگام بارگذاری برنامه

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;
    }
  };
})();

---

استفاده از داده‌های localStorage در ItemController

حالا باید به‌جای استفاده از آرایه خالی در ItemController، داده‌های اولیه را از localStorage دریافت کنیم.

کد قبلی:

const data = {
  items: [],
  currentItem: null,
  totalCalories: 0
};

کد جدید:

const data = {
  items: StorageController.getItemsFromStorage(),
  currentItem: null,
  totalCalories: 0
};

---

نتیجه این تغییر

با این تغییر، وقتی اپلیکیشن بارگذاری می‌شود:

• آیتم‌های ذخیره‌شده از localStorage خوانده می‌شوند
• داده‌ها دوباره در ساختار برنامه قرار می‌گیرند
• لیست آیتم‌ها و مجموع کالری‌ها پس از رفرش صفحه از بین نمی‌روند

---

آزمایش عملکرد

پس از پیاده‌سازی این بخش:

1. یک آیتم جدید به برنامه اضافه کنید
2. صفحه را رفرش کنید
3. مشاهده خواهید کرد که آیتم همچنان باقی مانده است

اگر آیتم دیگری هم اضافه شود، هر دو آیتم در localStorage ذخیره می‌شوند و پس از بارگذاری مجدد برنامه نمایش داده خواهند شد.

---

محدودیت فعلی

در این مرحله فقط افزودن آیتم‌ها با localStorage هماهنگ شده است. بنابراین اگر:

• آیتمی را حذف کنید
• آیتمی را ویرایش کنید

ممکن است تغییر فقط در رابط کاربری و داده‌های فعلی برنامه اعمال شود، اما پس از رفرش صفحه، مقدار قبلی از localStorage دوباره نمایش داده شود.

دلیل این رفتار آن است که هنوز عملیات حذف و ویرایش در localStorage پیاده‌سازی نشده‌اند.

---

جمع‌بندی

در این بخش، زیرساخت ماندگاری داده‌ها در اپلیکیشن مدیریت کالری ایجاد شد. مهم‌ترین کارهایی که انجام شدند عبارت‌اند از:

• ساخت StorageController
• ذخیره آیتم‌های جدید در localStorage
• دریافت آیتم‌ها از localStorage
• جایگزینی آرایه اولیه items با داده‌های ذخیره‌شده

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