localStorage dengan HTML5

Salah satu fitur yang tersedia pada bahasa pemrograman HTML khususnya HTML5 adalah penyimpanan sementara pada browser, meski telah ada cookies namun salah satu perbedaannya adalah tidak semua browser mendukung localStorage, terutama browser versi lama, namun keuntungannya adalah localStorage tersedia sebagai object didalam Javascript sehingga ketika ingin mengaksesnya jadi lebih mudah. Selain itu mengakses cookies bisa dilakukan dari sisi server, sedangkan untuk localStorage jika ingin diakses lewat server bisa diakali dengan menggunakan method GET atau POST, dimana data yang ingin diberikan pada server dijadikan sebagai parameter pada method tersebut.


Beberapa browser yang mendukung penggunaan localStorage adalah Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+.


 Deteksi browser.


Salah satu cara paling mudah untuk mengetahui suatu browser mendukung localStorage atau tidak adalah dengan menggunakan keyword typeof. Jika hasil returnnya adalah undefined maka bisa dipastikan bahwa browser tersebut tidak mendukung untuk penyimpanan data pada sisi klien, sedangkan hasil kembaliannya adalah object maka browser tersebut mendukung untuk penyimpanan pada sisi klient.

if(typeof(localStorage) == 'undefined')
     alert('Browser anda tidak mendukung localStorage.!');
else
     alert('Browser anda mendukung localStorage.');

Penggunaan localStorage

• Menyimpan data.
  Cara untuk menyimpan data menggunakan localStorage adalah dengan method setItem dengan 2 parameter, yang pertama sebagai key dan yang kedua merupakan nilainya.
  localStorage.setItem (key, value)
  

  localStorage.setItem ('nama', 'data');
  // menyimpan data dengan nilai 'data' dengan key nya adalah 'nama'.
  

• Mengambil data.
  Sedangkan untuk mengambil data menggunakan method getItem dengan sebuah parameter yang merupakan key atau nama variabel data yang ingin diambil.
  localStorage.getItem (key)
  

  localStorage.getItem ('nama');
  // mengambil data dengan key nama.
  

• Menghapus data.
  Untuk menghapus data yang tersimpan pada klient bisa menggunakan method removeItem dengan sebuah parameter yang merupakan nama key yang ingin dihapus.
  localStorage.removeItem (key)
  

  localStorage.removeItem ('nama');
  // menghapus data dengan key nama.
  

Berikut ini saya buat sebuah kode untuk mendeteksi browser yang anda pakai apakah support localStorage atau tidak.

Tulis Komentar dengan akun Facebook Anda.