Cordova - Depolama

İstemci uygulamalarında veri depolamak için mevcut olan depolama API'sini kullanabiliriz. Bu, kullanıcı çevrimdışıyken uygulamanın kullanımına yardımcı olur ve ayrıca performansı artırabilir. Bu eğitim yeni başlayanlar için olduğundan, size nasıl kullanılacağını göstereceğizlocal storage. Daha sonraki eğitimlerimizden birinde, size kullanılabilecek diğer eklentileri göstereceğiz.

Adım 1 - Düğme Ekleme

Dört düğme oluşturacağız index.htmldosya. Düğmeler,div class = "app" öğesi.

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

Aşağıdaki ekranı üretecektir -

Adım 2 - Etkinlik Dinleyicileri Ekleme

Cordova güvenlik politikası satır içi olaylara izin vermez, bu nedenle index.js dosyalarının içine olay dinleyicileri ekleyeceğiz. Ayrıca atayacağızwindow.localStorage bir localStorage daha sonra kullanacağımız değişken.

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;

Adım 3 - Fonksiyon Oluşturma

Şimdi düğmelere dokunulduğunda çağrılacak işlevler oluşturmamız gerekiyor. İlk işlev, yerel depolamaya veri eklemek için kullanılır.

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

Bir sonraki, konsola eklediğimiz verileri kaydedecektir.

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

Dokunursak SET LOCAL STORAGEdüğmesi, üç öğeyi yerel depolamaya ayarlayacağız. DokunursakSHOW LOCAL STORAGE daha sonra, konsol istediğimiz öğeleri günlüğe kaydedecektir.

Şimdi projeyi yerel depodan silen bir fonksiyon oluşturalım.

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

Tıklarsak SHOW LOCAL STORAGE butonu projeyi sildikten sonra çıktı gösterecek null proje alanı için değer.

Yerel depolama öğelerini de key() dizini bir bağımsız değişken olarak alacak ve ilgili dizin değerine sahip öğeyi döndürecek yöntem

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

Şimdi dokunduğumuzda GET BY KEY düğmesi, aşağıdaki çıktı görüntülenecektir.

NOT

Kullandığımızda key() yöntem, konsol, job onun yerine name tartışmamıza rağmen 0ilk nesneyi almak için. Bunun nedeni, yerel depolamanın verileri alfabetik sırada depolamasıdır.

Aşağıdaki tablo, mevcut tüm yerel depolama yöntemlerini göstermektedir.

S.No	Yöntemler ve Ayrıntılar
1	setItem(key, value) Öğeyi yerel depolamaya ayarlamak için kullanılır.
2	getItem(key) Öğeyi yerel depodan almak için kullanılır.
3	removeItem(key) Öğeyi yerel depodan kaldırmak için kullanılır.
4	key(index) Öğeyi kullanarak almak için kullanılır indexyerel depodaki öğenin. Bu, öğelerin alfabetik olarak sıralanmasına yardımcı olur.
5	length() Yerel depolamada bulunan öğelerin sayısını almak için kullanılır.
6	clear() Yerel depolamadan tüm anahtar / değer çiftlerini kaldırmak için kullanılır.