دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱۵
  • فروردین

جلسه ۰۵ : آموزش کار با حافظه در کوردوا

  • دسته‌بندی‌ها :
جلسه ۰۵ : آموزش کار با حافظه در کوردوا
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه گذشته با پیکربندی برنامه در کوردوا آشنا شدیم. در این جلسه آموزش کار با حافظه در کوردوا ارائه می گردد.

      آموزش کار با حافظه در کوردوا

      می توان از API ذخیره سازی موجود برای ذخیره داده ها در client apps ها استفاده کرد.
      این کار در استفاده از برنامه هنگام آفلاین بودن کاربر مفید است و عملکرد برنامه را بهبود می بخشد.
      از آنجا که این آموزش برای مبتدیان است، لذا نحوه استفاده از ذخیره سازی محلی local storage را نشان داده خواهد شد.

      مرحله ۱ – اضافه کردن دکمه ها

      در فایل index.html چهار دکمه خواهیم ساخت.
      این دکمه ها در درون عنصر  div class = “app”  قرار خواهند گرفت.

      مثال : 

      این دستور، صفحه زیر را نمایش خواهد داد.

      آموزش کار با حافظه در کوردوا

      مرحله ۲ – اضافه کردن Event Listeners

      سیاست امنیتی کوردوا اجازه وجود رویدادهای inline events را نمی دهد.
      به همین دلیل ما اقدام اضافه کردن event listeners در index.js می نماییم.
      همچنین window.localStorage را به یک متغیر localStorage اختصاص می دهیم که بعداً از آن استفاده می کنیم.

      مثال : 

      مرحله ۳ – ساخت توابع

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

      مثال : 

      سپس مورد بعدی را به عنوان داده وارد کنسول می کنیم.

      مثال : 

      اگر بر روی دکمه SET LOCAL STORAGE کلیک کنیم؛ می توانیم سه مورد را در local storage تنظیم نماییم.
      اگر بعد از آن HOW LOCAL STORAGE بزنیم؛ می توانیم در کنسول مواردی را که می خواهیم؛ وارد کنیم.

      show local storage

      show local storage

      حالا بیایید تابعی را که می توان به وسیله آن پروژه را از local storage حذف نماییم؛ ایجاد کنیم.

      مثال : 

      اگر بعد از حذف پروژه بر روی دکمه SHOW LOCAL STORAGE کلیک کنیم؛ خروجی مقدار null  را برای فیلد پروژه نمایش خواهد داد.

      show local storage 2

      show local storage 2

      علاوه بر این می توان عناصر  local storage را با استفاده از روش ()key دریافت کرد که شاخص را به عنوان یک argument در نظر می گیرد و عنصر را با مقدار شاخص مربوطه باز می گرداند.

      مثال : 

      حالا وقتی دکمه GET BY KEY را ضربه بزنیم، خروجی زیر نمایش داده می شود.

      show local storage key

      show local storage key

      نکته

       

      گرچه ما از argument 0 برای بازیابی object استفاده می کنیم اما هنگام استفاده از روش ()key کنسول به جای name، اقدام به وارد کردن job می کند.
      این امر به این خاطر است که ذخیره سازی محلی داده ها به ترتیب حروف الفبا صورت می گیرد.

      در جدول زیر می توانید همه روش های ذخیره سازی محلی را ببینید.

        شماره روش  روش و توضیحات هر یک از روش ها
        (setItem(key, value
      از این متود برای تنظیم آیتم در ذخیره سازی محلی استفاده می شود.
        (getItem(key
      از این متود برای به دست آوردن آیتم از  ذخیره سازی محلی استفاده می شود.
        (removeItem(key
      از این متود برای حذف آیتم ها از ذخیره سازی محلی استفاده می شود.
        (key(index
      از این متود برای به دست آوردن آیتم ها به وسیله index  از ذخیره سازی محلی استفاده
      می شود. این متود به مرتب کردن آیتم ها بر اساس حروف الفبا کمک می کند.
        ()length
      از این آیتم برای بازیابی تعداد موارد موجود در ذخیره سازی محلی استفاده می شود.
        ()clear
      از این مورد برای حذف key/value از ذخیره ساز محلی استفاده می شود.

      کلام آخر

      در این جلسه آموزش کار با حافظه در کوردوا را آموختید.
      در جلسه بعدی آموزش کار با Events ها در این پلتفرم ارائه خواهد گردید.
      با پی وی لرن همراه باشید.

      QR:  جلسه ۰۵ : آموزش کار با حافظه در کوردوا
      به اشتراک بگذارید