Persistent Data in PhoneGap using LocalStorage

  • Posted on: 18 February 2013
  • By: oon

Ingin menyimpan data yang bersifat persistent di device mobile? Meski device dilakukan restart pada device data tetap tersimpan hingga aplikasi dihapus atau data dihapus secara manual dari aplikasi?

Dalam HTML5 dikenal webstorage yang menyimpan persistent data dalam format pasangan key-value [1].

Implementasi dalam PhoneGap menggunakan LocalStorage yang ada dalam section Storage di http://docs.phonegap.com
Implementasi pada BlackBerry mensyaratkan OS 6 atau yang lebih baru.

Untuk percobaan sederhana, kita hanya akan mengubah file index.js


onDeviceReady: function() {
app.receivedEvent('deviceready');

var storeddata = window.localStorage.getItem("localdata");
if(storeddata) { // it's not null
alert("localdata: "+storeddata+". and it's cleared!");
// value is now equal to "value"
window.localStorage.removeItem("localdata");
window.localStorage.clear();
// localStorage is now empty
}
else { // stored data is null
window.localStorage.setItem("localdata", "data stored in localStorage.");
var keyname = window.localStorage.key(0);
console.log(keyname);
// keyname is now equal to "localdata"
var value = window.localStorage.getItem("localdata");
console.log(value);
alert("localdata added!");
}

},

Cara mengujinya cukup sederhana, Run aplikasi di Device (atau emulator), kemudian akan tampil pop-up alert "localdata added" yang artinya data sudah berhasil masuk ke penyimpanan LocalStorage. Kemudian keluar dari aplikasi dan restart device. Setelah device selesai restart, kemudian Run lagi aplikasinya, akan muncul pop-up alert bahwa localdata ada isinya, yang artinya meski device dimatikan data tidak hilang.

ps: dalam Android disebut sebagai SharedPreference, dalam iOS disebut sebagai CoreData, dalam BlackBerry disebut sebagai PersistentStore

[1] http://dev.w3.org/html5/webstorage/

Comments

terimaksih mas, tutorialnya sangat bermanfaat, sudah saya coba dan berhasil, tetapi saya punya sedikit pertanyaan mas, apakah data dalam localstorage bisa diakses pada page/halaman baru? soalnya saya sudah coba tetapi tidak bisa, jika bisa mohon tolong sekali ditunjukan caranya, terimakasih mas maaf merepotkan

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.