44- آموزش جاوااسکریپت | پروژه عملی :قسمت 6 از 6 - ذخیره‌سازی داده‌ها در LocalStorage در پروژه Book List با کلاس‌های ES6

در این بخش، قابلیت ماندگاری داده‌ها را به پروژه Book List اضافه می‌کنیم تا اطلاعات کتاب‌ها فقط در رابط کاربری نمایش داده نشوند و بعد از بارگذاری مجدد صفحه نیز حفظ شوند.

برای این کار، از نسخه ES6 و کلاس‌ها استفاده می‌کنیم. ایده اصلی این است که یک کلاس جداگانه به نام Store بسازیم تا تمام عملیات مربوط به LocalStorage را مدیریت کند. این عملیات شامل دریافت کتاب‌ها، افزودن کتاب جدید، نمایش کتاب‌ها در شروع بارگذاری صفحه و حذف کتاب از حافظه مرورگر است.

ایجاد کلاس Store

در ابتدا یک کلاس جدید زیر کلاس UI تعریف می‌کنیم. تمام متدهای این کلاس به صورت static هستند؛ یعنی برای استفاده از آن‌ها نیازی به ساختن نمونه جدید با new نداریم.

class Store {
  static displayBooks() {}

  static getBooks() {}

  static addBook(book) {}

  static removeBook(isbn) {}
}

استفاده از متدهای استاتیک باعث می‌شود بتوانیم مستقیماً متدها را با نام کلاس فراخوانی کنیم:

Store.addBook(book);
Store.getBooks();

دریافت کتاب‌ها از LocalStorage

از آنجا که در چند بخش مختلف به لیست کتاب‌ها نیاز داریم، بهتر است یک متد مجزا برای دریافت آن‌ها از LocalStorage داشته باشیم تا از تکرار کد جلوگیری شود.

در این متد بررسی می‌کنیم که آیا کلید books در LocalStorage وجود دارد یا نه. اگر وجود نداشت، یک آرایه خالی برمی‌گردانیم. در غیر این صورت، مقدار ذخیره‌شده را از حالت رشته‌ای JSON به آرایه جاوااسکریپتی تبدیل می‌کنیم.

static getBooks() {
  let books;

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

  return books;
}

افزودن کتاب به LocalStorage

در زمان ثبت فرم، کتاب جدید ابتدا در رابط کاربری نمایش داده می‌شود. اما اگر بخواهیم بعد از رفرش صفحه نیز باقی بماند، باید آن را در LocalStorage ذخیره کنیم.

پس بعد از اضافه شدن کتاب به لیست، متد addBook از کلاس Store را صدا می‌زنیم:

Store.addBook(book);

پیاده‌سازی این متد به این صورت است:

static addBook(book) {
  const books = Store.getBooks();
  books.push(book);
  localStorage.setItem('books', JSON.stringify(books));
}

در اینجا:

• ابتدا لیست فعلی کتاب‌ها را می‌گیریم.
• کتاب جدید را به آرایه اضافه می‌کنیم.
• آرایه را با JSON.stringify به رشته تبدیل می‌کنیم.
• سپس آن را دوباره در LocalStorage ذخیره می‌کنیم.

نمایش کتاب‌ها هنگام بارگذاری صفحه

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

static displayBooks() {
  const books = Store.getBooks();

  books.forEach(function(book) {
    const ui = new UI();
    ui.addBookToList(book);
  });
}

در این متد:

• ابتدا کتاب‌ها از LocalStorage خوانده می‌شوند.
• سپس با forEach روی آن‌ها پیمایش می‌کنیم.
• هر کتاب با متد addBookToList در رابط کاربری نمایش داده می‌شود.

برای اجرای این متد در زمان بارگذاری صفحه، از رویداد DOMContentLoaded استفاده می‌کنیم:

document.addEventListener('DOMContentLoaded', Store.displayBooks);

این کار باعث می‌شود به محض آماده شدن ساختار HTML صفحه، کتاب‌های ذخیره‌شده در LocalStorage نمایش داده شوند.

حذف کتاب از LocalStorage

تا اینجا اگر کتابی را از جدول حذف کنیم، فقط از رابط کاربری حذف می‌شود و با رفرش صفحه دوباره برمی‌گردد. برای حل این مسئله باید حذف از LocalStorage را هم پیاده‌سازی کنیم.

چون در این پروژه شناسه یکتای جداگانه‌ای نداریم، از مقدار ISBN برای تشخیص کتاب استفاده می‌کنیم.

در بخش حذف، بعد از حذف آیتم از رابط کاربری، متد removeBook را فراخوانی می‌کنیم و ISBN همان سطر را به آن می‌دهیم:

Store.removeBook(
  e.target.parentElement.previousElementSibling.textContent
);

در این کد:

• e.target همان لینک حذف است.
• parentElement ما را به سلول جدول مربوط به دکمه حذف می‌رساند.
• previousElementSibling سلول قبلی را برمی‌گرداند که شامل ISBN است.
• textContent مقدار متنی آن را استخراج می‌کند.

اکنون متد removeBook را به این صورت می‌نویسیم:

static removeBook(isbn) {
  const books = Store.getBooks();

  books.forEach(function(book, index) {
    if (book.isbn === isbn) {
      books.splice(index, 1);
    }
  });

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

در این متد:

• ابتدا آرایه کتاب‌ها را می‌گیریم.
• روی آرایه پیمایش می‌کنیم.
• هر جا isbn کتاب با مقدار دریافت‌شده برابر بود، همان آیتم را با splice حذف می‌کنیم.
• در پایان آرایه جدید را دوباره در LocalStorage ذخیره می‌کنیم.

جمع‌بندی

با اضافه شدن کلاس Store، پروژه Book List از یک برنامه صرفاً نمایشی به یک برنامه با داده‌های پایدار تبدیل می‌شود. اکنون:

• کتاب‌ها بعد از ثبت فرم در LocalStorage ذخیره می‌شوند.
• هنگام بارگذاری صفحه، دوباره در جدول نمایش داده می‌شوند.
• در زمان حذف، هم از رابط کاربری و هم از LocalStorage پاک می‌شوند.

این ساختار باعث می‌شود منطق مدیریت داده‌ها از منطق رابط کاربری جدا شود و کد پروژه تمیزتر و قابل نگهداری‌تر باشد.

تمرین پیشنهادی

به عنوان تمرین، می‌توانید همین قابلیت را در نسخه ES5 پروژه که با prototype نوشته شده است نیز پیاده‌سازی کنید. این کار کمک می‌کند تفاوت پیاده‌سازی LocalStorage در ساختار پروتوتایپی و کلاسی را بهتر درک کنید.