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.