برنامه مدیریت کالری غذا: ویرایش آیتم‌ها در Local Storage

تا این قسمت از کار برنامه ما کامل شده است و می توانیم از آن استفاده کنیم اما من می خواهم از local storage استفاده کنم تا با refresh شدن صفحات، داده هایمان را از دست ندهیم. در قدم اول باید کنترلر storage را تعریف کنیم. اگر جلسه اول را به خاطر داشته باشید، گفتم که این کنترلر را در ابتدای فایل تعریف می کنیم:

// Storage Controller
const StorageCtrl = (function(){

})();

در قدم اول باید به کنترلر App برویم و کنترلر Storage را به آن پاس بدهیم تا بعدا بتوانیم هنگام ثبت آیتم ها، در همان قسمت آن ها را به local storage نیز اضافه کنیم:

// App Controller
const App = (function(ItemCtrl, StorageCtrl, UICtrl){
  // Load event listeners
  const loadEventListeners = function(){
// بقیه کدها //

همچنین باید آن را در انتهای این فراخوانی قرار دهیم:

// بقیه کدها //
      // Load event listeners
      loadEventListeners();
    }
  }
  
})(ItemCtrl, StorageCtrl, UICtrl);

// Initialize App
App.init();

 حالا به تابع itemAddSubmit می رویم چرا که مسئول ثبت آیتم های وارد شده از سمت کاربر است. من می خواهم در این قسمت متدی را صدا بزنم که داده های ثبت شده را در local storage نیز ثبت کند:

// بقیه کدها //
      //Store in localStorage
      StorageCtrl.storeItem(newItem);

      // Clear fields
      UICtrl.clearInput();
    }

    e.preventDefault();
  }

بنابراین باید متد storeItem را در کنترلر Storage تعریف کنیم:

// Storage Controller
const StorageCtrl = (function(){
  // Public methods
  return {
    storeItem: function(item){
      let items;
      // Check if any items in ls
      if(localStorage.getItem('items') === null){
        items = [];
        // Push new item
        items.push(item);
        // Set ls
        localStorage.setItem('items', JSON.stringify(items));
      } else {
        // Get what is already in ls
        items = JSON.parse(localStorage.getItem('items'));

        // Push new item
        items.push(item);

        // Re set ls
        localStorage.setItem('items', JSON.stringify(items));
      }
    }
  }
})();

توضیح کد:

item جدید به این تابع پاس داده می شود. سپس باید با یک شرط if چک کنیم که آیا آیتمی درون local storage وجود دارد یا خیر (آیا دفعه اولی است که کاربر از این برنامه استفاده می کند؟). اگر اینطور بود، باید یک آرایه به نام items بسازیم و آیتم جدید را در آن push کنیم. نکته بعدی این است که local storage فقط مقادیر رشته ای را قبول می کند بنابراین قبل از وارد کردن آرایه جدید باید با JSON.stringify آن را تبدیل به یک رشته کنیم. دستور localStorage.setItem از دستورات خود جاوا اسکریپت است و داده شما را وارد local storage می کند (پارامتر اول آن نام مقدار مورد نظر است که اگر وجود نداشته باشد به صورت جدید ساخته می شود و پارامتر دوم مقداری است که باید در آن خصوصیت (نام مقدار) قرار بگیرد).

در حالت دیگر اگر items درون local storage وجود داشته باشد باید ابتدا آن را دریافت کنیم. از JSON.parse برای دریافت استفاده کرده ایم تا داده هایمان را از حالت رشته ای به حالت عادی و قبلی خود (آرایه) برگردانیم. سپس با push آیتم جدید را به آن ها اضافه کرده و دوباره با setItem آن ها را به local storage برمی گردانیم. با این کار آیتم های جدید در local storage ذخیره می شوند اما آن ها را دریافت نکرده و نمایش نداده ایم بنابراین باز هم با Refresh شدن صفحه از  UI حذف می شوند (البته هنوز در local storage هستند). اگر می خواهید آن را در local storage ببینید، مرورگر را باز کرده و یک آیتم جدید ثبت کنید. سپس صفحه را refresh کرده و به قسمت dev tools مرورگر بروید (کلید f12). از پنجره باز شده، سربرگ Application را انتخاب کنید. در آنجا می توانید آیتم های اضافه شده را ببینید.

با این حساب قدم بعدی دریافت آیتم ها از local storage و نمایش آن ها در UI است. بنابراین متد بعدی را نیز در کنترلر storage تعریف می کنیم:

// کدهای مربوط به متد اول برای ثبت آیتم ها در لوکال استورج //
        // Re set ls
        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;
    }
  }
})();

من نام این متد را getItemsFromStorage گذاشته ام. کار این متد این است که اگر local storage خصوصیت items را نداشته باشد، آرایه items را خالی می گذاریم و در غیر این صورت همان items درون local storage را برمی گردانیم. در مرحله بعد به کنترلر آیتم ها رفته و از این متد استفاده می کنیم:

// Item Controller
const ItemCtrl = (function(){
  // Item Constructor
  const Item = function(id, name, calories){
    this.id = id;
    this.name = name;
    this.calories = calories;
  }

  // Data Structure / State
  const data = {
    // items: [
    //   // {id: 0, name: 'Steak Dinner', calories: 1200},
    //   // {id: 1, name: 'Cookie', calories: 400},
    //   // {id: 2, name: 'Eggs', calories: 300}
    // ],
    items: StorageCtrl.getItemsFromStorage(),
    currentItem: null,
    totalCalories: 0
  }
// بقیه کدها //

حالا کدها را ذخیره کرده و به مرورگر بروید. تمام آیتم های شما در مرورگر ظاهر خواهند شد و همچنین با refresh شدن صفحات هیچ آیتمی پاک نمی شود. البته مشکلات دیگری داریم! اگر آیتمی را حذف کنیم یا ویرایش کنیم (و هر کاری از این نوع را انجام دهیم)، با refresh شدن صفحه همه چیز به حالت قبل برمی گردد. بنابراین در جلسه بعد روی این موضوع تمرکز خواهیم کرد.