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

در قسمت قبلی با موفقیت عملیات ثبت و حذف از local storage را پیاده سازی کردیم اما هنوز ویرایش هایی مثل تغییر کالری و حذف را در آن پیاده سازی نمی کنیم بنابراین با refresh شدن صفحه، همه چیز به حالت قبلی برمی گردد. برای شروع کار این جلسه به کنترلر app بروید و در متد itemUpdateSubmit بگویید:

// itemUpdateSubmit  // دیگر کد های مربوط به
     // Update local storage
     StorageCtrl.updateItemStorage(updatedItem);

     UICtrl.clearEditState();

    e.preventDefault();
  }

واضح است که متد updateItemStorage را تعریف نکرده ایم، بنابراین به کنترلر Storage بروید تا این متد را تعریف کنیم:

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

در این کد ابتدا آیتم ها را از local storage دریافت کرده ایم. سپس با یک حلقه ForEach بین این آیتم ها گردش کرده ایم و هر جا که updatedItem.id برابر با item.id بود یعنی به آیتم مورد نظر رسیده ایم. در این حالت از متد splice استفاده می کنیم و می گوییم از ایندکس یا موقعیتِ index (ایندکس به صورت خودکار از سمت forEach پاس داده می شود) 1 آیتم را حذف و به جایش updatedItem را بگذار. انتظار دارم که نحوه کار با متد splice بلد باشید اما باز هم توضیح کوتاهی می دهم:

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

بگذارید چند مثال بزنم:

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum')

خروجی این کد برابر این آرایه است:

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]

یعنی از ایندکس دوم، 0 عنصر حذف شوند و آن عنصر drum باشد، که به زبان ساده تر یعنی drum را به ایندکس دوم اضافه کن.

مثال بعدی:

let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
let removed = myFish.splice(3, 1)

یعنی از ایندکس 3، یک عضو را حذف کن. نتیجه:

// myFish is ["angel", "clown", "drum", "sturgeon"]

مثال بعدی:

let myFish = ['angel', 'clown', 'drum', 'sturgeon']
let removed = myFish.splice(2, 1, 'trumpet')

یعنی از ایندکس 2، یک عضو را حذف کن و سپس trumpet را اضافه کن. نتیجه:

// myFish is ["angel", "clown", "trumpet", "sturgeon"]

مثال های زیادی برای این متد وجود دارد. برای مشاهده مثال های بیشتر به صفحه توسعه دهندگان موزیلا مراجعه کنید.

در نهایت پس از استفاده از splice، مقدار به روز رسانی شده را دوباره به local storage می فرستیم. حالا ویرایش های ما نیز در local storage ثبت می شوند و می توانید خودتان این موضوع را در مرورگر تست کنید.

در مرحله بعد باید کد های حذف آیتم از local storage را بنویسیم بنابراین به متد itemDeleteSubmit بروید و در آن این خط کد را اضافه کنید:

// بقیه کد ها //
    // Delete from local storage
    StorageCtrl.deleteItemFromStorage(currentItem.id);

    UICtrl.clearEditState();

    e.preventDefault();
  }

deleteItemFromStorage متد مورد نظر ما است که باید در کنترلر Storage تعریف شود:

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

همانطور که می بینید این متد id را می گیرد. در ابتدا باید آیتم ها را از local storage دریافت کنیم. همانطور که گفتم اگر از JSON.parse استفاده نکنیم، محتویات local storage عینا (به صورت رشته) به ما تحویل داده می شوند و ما نمی توانیم روی یک رشته با حلقه forEach گردش کنیم. بنابراین JSON.parse آن را از رشته خارج می کند تا به صورت یک آرایه عادی در دسترس ما باشد. باز هم با یک حلقه و متد Splice عنصر مورد نظر را حذف کرده ایم و نتیجه را روی local storage ذخیره کرده ایم.

آخرین کار ما تعیین وظیفه دکمه Clear All برای local storage است. من دقیقا پایین تر از همین تابع 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));
    },
    clearItemsFromStorage: function(){
      localStorage.removeItem('items');
    }

یعنی کل خصوصیت items را از local storage حذف کن. حالا متد clearAllItemsClick را پیدا کنید و کد زیر را به آن اضافه کنید:

// بقیه کد ها //
    // Remove from UI
    UICtrl.removeItems();

    // Clear from local storage
    StorageCtrl.clearItemsFromStorage();

    // Hide UL
    UICtrl.hideList();
    
  }

خسته نباشید! حالا برنامه ما کامل شده است و قسمت آخر این پروژ] را نیز پشت سر گذاشتیم. ما در این پروژه از Module Pattern استفاده کردیم تا با این مدل طراحی نیز آشنا بشویم و امیدوارم از آن لذت برده باشید.

دانلود سورس کد نهایی پروژه