آموزش Cordova، بخش 4: ذخیره سازی

آموزش Cordova، بخش 4: ذخیره سازی

در Cordova امکان استقاده از API ذخیره سازی (Storage) در سمت کلاینت وجود دارد. خب این امکان می تواند به ما کمک کند، زمانی که کاربر آفلاین است داده ها را ذخیره سازی کنیم، که طبیعتا این کار باعث افزایش کارایی اپلیکیشن می شود. از آنجایی که این آموزش برای افراد مبتدی است ما نحوه استفده از Local storage را به شما آموزش خواهیم داد.

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

قدم اول: افزودن دکمه

در اینجا ما قصد ایجاد چهار دکمه در فایل index.html داریم. که این دکمه ها در داخل عنصر class="app" قرار می دهیم.

<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>

cordova local storage

قدوم دوم: افزودن Event Listeners

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

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 storge را تعریف می کنیم.

function setLocalStorage() {
localStorage.setItem("Name", "John");
localStorage.setItem("Job", "Developer");
localStorage.setItem("Project", "Cordova Project");
}

تابع بعدی برای نمایش داده ها در کنسول را ایجاد می کنیم.

function showLocalStorage() {
 console.log(localStorage.getItem("Name"));
console.log(localStorage.getItem("Job"));
console.log(localStorage.getItem("Project"));
}

با فشردن دکمه SET LOCAL STORAGE، سه آیتم در Local storage ذخیره می شود. سپس با فشردن دکمه SHOW LOCAL STORAGE در کنسول آیتم های ذخیره شده نمایش داده می شوند.

نمایش داده ها ذخیره شده در کنسول

حال اجازه دهید تابعی را برای حذف آیتم Project از Local storage را تعریف کنیم.

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

با حذف آیتم project و فشردن مجدد دکمه SHOW LOCAL STORAGE خروجی آیتم Project همانند تصویر زیر null خواهد بود.

حذف ایتم از local storage

شما همچنین می توانید آیتم ذخیره شده در local storage را با متد ()key بازیابی کنید. برای انجام اینکار می بایست اندیس آیتم مورد نظر را به عنوان آرگومان به این متد داده تا مقدار آن را برگرداند.

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

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

local storage

نکته

زمانیکه ما از متد ()key استفاده می کنیم در کنسول بجای مشاهده name مقدار آیتم job را مشاهده خواهیم کرد حتی اگر ما 0 را بعنوان آرگومان قرار دهیم که اولین آبجک را برگرداند. به این علت که Local storage داده ها را بر اساس حروف الفبا ذخیره سازی می کند.

جدول زیر تمامی متد های Local storage را نمایش می دهد.

ردیف متد و جزئیات
1

setItem(key, value)

برای افزودن یک آیتم جدید و یا بروزرسانی آن در Local storage

2

getItem(key)

برای بازگرداندن مقدار یک آیتم از Local storage

3

removeItem(key)

برای حذف یک آیتم از Local storage

4

key(index)

بازگرداندن یک آیتم بوسیله اندیس. آیتم ها بر اساس حروف الفبا مرتب سازی می شوند

5

length()

تعداد آیتم های موجود در Local storage را برمیگرداند

6

clear()

برای حذف تمامی آیتم ها از Local storage



بومیم