با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه گذشته با پیکربندی برنامه در کوردوا آشنا شدیم. در این جلسه آموزش کار با حافظه در کوردوا ارائه می گردد.
می توان از API ذخیره سازی موجود برای ذخیره داده ها در client apps ها استفاده کرد.
این کار در استفاده از برنامه هنگام آفلاین بودن کاربر مفید است و عملکرد برنامه را بهبود می بخشد.
از آنجا که این آموزش برای مبتدیان است، لذا نحوه استفاده از ذخیره سازی محلی local storage را نشان داده خواهد شد.
در فایل index.html چهار دکمه خواهیم ساخت.
این دکمه ها در درون عنصر div class = “app” قرار خواهند گرفت.
1 2 3 4 | <button id = "setLocalStorage">SET LOCAL STORAGE</button> <button id = "showLocalStorage">SHOW LOCAL STORAGE</button> <button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button> <button id = "getLocalStorageByKey">GET BY KEY</button> |
این دستور، صفحه زیر را نمایش خواهد داد.
سیاست امنیتی کوردوا اجازه وجود رویدادهای inline events را نمی دهد.
به همین دلیل ما اقدام اضافه کردن event listeners در index.js می نماییم.
همچنین window.localStorage را به یک متغیر localStorage اختصاص می دهیم که بعداً از آن استفاده می کنیم.
1 2 3 4 5 6 7 | document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); document.getElementById("removeProjectFromLocalStorage").addEventListener ("click", removeProjectFromLocalStorage); document.getElementById("getLocalStorageByKey").addEventListener ("click", getLocalStorageByKey); var localStorage = window.localStorage; |
حالا وقت ساختن توابع است که هنگام استفاده از دکمه ها به کار گرفته می شوند.
از اولین تابع برای اضافه کردن داده به ذخیره ساز محلی local storage استفاده می شود.
1 2 3 4 5 | function setLocalStorage() { localStorage.setItem("Name", "John"); localStorage.setItem("Job", "Developer"); localStorage.setItem("Project", "Cordova Project"); } |
سپس مورد بعدی را به عنوان داده وارد کنسول می کنیم.
1 2 3 4 5 | function showLocalStorage() { console.log(localStorage.getItem("Name")); console.log(localStorage.getItem("Job")); console.log(localStorage.getItem("Project")); } |
اگر بر روی دکمه SET LOCAL STORAGE کلیک کنیم؛ می توانیم سه مورد را در local storage تنظیم نماییم.
اگر بعد از آن HOW LOCAL STORAGE بزنیم؛ می توانیم در کنسول مواردی را که می خواهیم؛ وارد کنیم.
حالا بیایید تابعی را که می توان به وسیله آن پروژه را از local storage حذف نماییم؛ ایجاد کنیم.
1 2 3 | function removeProjectFromLocalStorage() { localStorage.removeItem("Project"); } |
اگر بعد از حذف پروژه بر روی دکمه SHOW LOCAL STORAGE کلیک کنیم؛ خروجی مقدار null را برای فیلد پروژه نمایش خواهد داد.
علاوه بر این می توان عناصر local storage را با استفاده از روش ()key دریافت کرد که شاخص را به عنوان یک argument در نظر می گیرد و عنصر را با مقدار شاخص مربوطه باز می گرداند.
1 2 3 | function getLocalStorageByKey() { console.log(localStorage.key(0)); } |
حالا وقتی دکمه GET BY KEY را ضربه بزنیم، خروجی زیر نمایش داده می شود.
گرچه ما از argument 0 برای بازیابی object استفاده می کنیم اما هنگام استفاده از روش ()key کنسول به جای name، اقدام به وارد کردن job می کند.
این امر به این خاطر است که ذخیره سازی محلی داده ها به ترتیب حروف الفبا صورت می گیرد.
در جدول زیر می توانید همه روش های ذخیره سازی محلی را ببینید.
شماره روش | روش و توضیحات هر یک از روش ها |
(setItem(key, value از این متود برای تنظیم آیتم در ذخیره سازی محلی استفاده می شود. | |
(getItem(key از این متود برای به دست آوردن آیتم از ذخیره سازی محلی استفاده می شود. | |
(removeItem(key از این متود برای حذف آیتم ها از ذخیره سازی محلی استفاده می شود. | |
(key(index از این متود برای به دست آوردن آیتم ها به وسیله index از ذخیره سازی محلی استفاده می شود. این متود به مرتب کردن آیتم ها بر اساس حروف الفبا کمک می کند. | |
()length از این آیتم برای بازیابی تعداد موارد موجود در ذخیره سازی محلی استفاده می شود. | |
()clear از این مورد برای حذف key/value از ذخیره ساز محلی استفاده می شود. |
در این جلسه آموزش کار با حافظه در کوردوا را آموختید.
در جلسه بعدی آموزش کار با Events ها در این پلتفرم ارائه خواهد گردید.
با پی وی لرن همراه باشید.