برنامه لیست کتاب: اضافه کردن پروژه به Local Storage (قسمت 1)

اضافه کردن پروژه به Local Storage (قسمت 1)

ما توانستیم تا قسمت قبل پروژه ی خود را به طور کامل نوشته و آن را به ES6 نیز تبدیل کنیم! پروژه ی ما در حال حاضر کامل بوده و به طور 100 درصد کار می کند اما موضوعی وجود دارد که کمی آزار دهنده است. اگر به مرورگر بروید و کتابی را ثبت کنید و سپس صفحه را refresh کنید، کتاب ثبت شده پاک شده و برنامه از صفر شروع می شود. به نظر شما راه حل این مشکل چیست؟

بله یک راه خوب استفاده از LocalStorage است؛ شما می توانید با LocalStorage داده های مورد نظر خود را به صورت جفت های key/value در مرورگر کاربر ذخیره کنید. ممکن است بپرسید تفاوت کوکی (cookie) ها و LocalStorage چیست؟ بگذارید برایتان توضیح بدهم.

کوکی ها:

• دارای تاریخ انقضا هستند و پس از مدت تعیین شده توسط شما حذف خواهند شد.
• با هر درخواست HTTP به صورت خودکار به سمت سرور ارسال می شوند.
• حداکثر حجم قابل استفاده در آن ها 4 کیلوبایت است.

LocalStorage:

• داده ها دارای تاریخ انقضاء نیستند. بنابراین تا زمانی که شما با جاوا اسکریپت یا کاربر از تنظیمات مرورگر آن ها را پاک نکند، هیچ داده ای از آن ها پاک نمی شود.
• خود به خود با درخواست های HTTP ارسال نمی شوند و اگر بخواهید به این داده ها در سمت سرور دسترسی داشته باشید باید آن ها را به صورت دستی (مثلا با یک درخواست AJAX) به سرور ارسال کنید.
• حداکثر حجم قابل استفاده در آن ها حدود 5 مگابایت (5120 کیلوبایت) می باشد.

بنابراین می توان گفت که کوکی ها بیشتر زمانی استفاده می شوند که بخواهیم داده ها را در سمت سرور در اختیار داشته باشیم. هنگام استفاده از این دو باید از خودتان بپرسید که کدام قسمت از برنامه ی شما به داده ها نیاز دارد؟ Front-end یا back-end؟ اگر داده ها را فقط در قسمت front-end می خواهید بهتر است از LocalStorage استفاده کنید تا با هر درخواستِ HTTP، داده های نامربوط را به سرور ارسال نکرده و حجم درخواست ها را افزایش ندهید.

از آنجایی که برنامه ی ما به سرور متصل نخواهد شد، بهتر است از LocalStorage استفاده کنیم. به دلیل خوانایی بیشتر از نسخه ی ES6 برنامه مان استفاده خواهیم کرد. برای این کار وارد فایل appes6.js می شویم و یک کلاس جدید به نام Store بسازیم. این کلاس باید static باشد تا بدون نیاز به ساختن نمونه از آن، بتوانیم از آن استفاده کنیم. من این کلاس را پس از کلاس UI می نویسم:

class Store {

    static getBooks() {

    }

    static displayBooks() {

    }

    static addBook() {

    }

    static removeBook () {

    }
}

همانطور که می بینید هر چهار متد این کلاس static هستند تا برای استفاده از آن ها نیازی به ساختن شیء از این کلاس نداشته باشیم. نقش این متدها به شرح زیر است:

• متد getBooks: کار این متد دریافت مقادیر (کتاب ها) از LocalStorage است. ما تقریبا برای تمامی این متدها نیاز به دریافت داده ها از LocalStorage داریم و برای اینکه در هر متد کد های تکراری دریافت داده ها را ننویسیم، یک متد خاص را برای انجام این کار مشخص کرده ایم.
• متد displayBooks: این متد کتاب های درون LocalStorage را توسط متد getBooks دریافت کرده و در جدول برنامه نمایش می دهد.
• متد addBook: کار این متد اضافه کردن کتاب های مورد نیاز ما به LocalStorage است.
• متد removeBook: همانطور که از نام این متد مشخص است، کار آن حذف کردن کتاب ها از LocalStorage است.

اگر یادتان باشد فرآیند ثبت کتاب ها در جدول در یک event-listener به نام مدیریت می شد و کد زیر را داشت:

// Validate
  if(title === '' || author === '' || isbn === '') {
    // Error alert
    ui.showAlert('Please fill in all fields', 'error');
  } else {
    // Add book to list
    ui.addBookToList(book);

    // Show success
    ui.showAlert('Book Added!', 'success');
  
    // Clear fields
    ui.clearFields();
  }

من می خواهم هر زمان که کتاب را به جدول اضافه کردم، آن را درون LocalStorage نیز قرار بدهم بنابراین:

// Validate
  if(title === '' || author === '' || isbn === '') {
    // Error alert
    ui.showAlert('Please fill in all fields', 'error');
  } else {
    // Add book to list
    ui.addBookToList(book);

    // Add to LS
    Store.addBook(book);

    // Show success
    ui.showAlert('Book Added!', 'success');
  
    // Clear fields
    ui.clearFields();
  }

از آنجایی که addBook یک متد استاتیک است نیازی به ساختن شیء از آن نیست و می توان به طور مستقیم و به شکل بالا از آن استفاده کرد. حالا باید این متد را در کلاس Store کدنویسی کنیم اما برای اضافه انجام این کار نیاز به دریافت کتاب ها از LocalStorage داریم بنابراین قبل از آن متد getBooks را به شکل زیر برنامه نویسی می کنیم:

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

    return books;
}

در ابتدا یک متغیر به نام books ایجاد کرده ایم، سپس در یک شرط if دو حالت را بررسی می کنیم:

• اگر مقدار books در LocalStorage خالی باشد، متغیر books را برابر یک آرایه ی خالی قرار می دهیم.
• در غیر این صورت (اگر مقدار books در LocalStorage خالی نباشد)، مقدار books را برابر با مقدار books در LocalStorage قرار می دهیم. به زبان ساده تر کتاب های داخل LocalStorage را درون متغیر books خودمان می گذاریم.

در نهایت نیز books را برگردانده ایم تا بعدا از آن استفاده کنیم. توجه داشته باشید که LocalStorage داده ها را فقط به صورت رشته ذخیره می کند اما با ساختار یک شیء! منظور من از این حرف این است که داده ها به صورت یک شیء JSON ذخیره می شوند یعنی قبل از قرار گرفتن در LocalStorage کل شیء جاوا اسکریپتی درون یک رشته قرار می گیرد. به طور مثال اگر دستور زیر را اجرا کنیم:

window.localStorage.getItem('user');

ساختار خروجی ما به شکل زیر خواهد بود:

“{“name”:”Obaseki Nosa”,”location”:”Lagos”}”

این خروجی یک شیء بوده که درون یک رشته قرار گرفته است. ما نمی توانیم از چنین چیزی استفاده کنیم بنابراین باید دوباره آن را به یک شیء تبدیل کنیم. به همین دلیل است که از JSON.parse استفاده کرده ایم. کار JSON.parse تبدیل یک رشته ی JSON به یک شیء جاوا اسکریپتی است. تا اینجای کار پیشرفت خوبی داشته ایم. در قسمت آینده این پروژه را تمام خواهیم کرد.