Memahami 3 Jenis Api Model pada HTML5

Pada artikel kali ini, kita akan memahami 3 Api Model pada HTML5. Ketiga api model tersebut adalah Webstorage Api, Geolocation Api, dan Drag and Drop Api. Tentunya, masing-masing api model tersebut memiliki fungsinya tersendiri. Misalnya Webstorage Api, merupakan Web API yang berfungsi untuk menyimpan data secara local pada sisi client. Lalu bagaimana dengan Geolocation Api dan Drag and Drop Api? Untuk penjelasan lebih lengkap simak artikel berikut.

3 Api Model HTML5

Perlu tegaskan lagi, terdapat 3 api model HTML5 beserta fungsinya masing-masing. Singkatnya, API (Application Programming Interface) merupakan sebuah software yang membantu developer untuk mengintegrasikan dan mengizinkan akses dua aplikasi yang berbeda secara bersamaan untuk saling terhubung. Pada HTML5 terdapat 3 api model yang umumnya webdev gunakan, yaitu Webstorage Api, Geolocation Api, dan Drag and Drop Api. Berikut merupakan penjelasan mengenai 3 Api model HTML5 tersebut, kita mulai dari Webstorage Api.

1. Webstorage API

Webstorage adalah Web API yang berfungsi untuk menyimpan data secara lokal pada sisi client. Jika dibandingkan dengan objek atau array, Webstorage lebih unggul. Data yang tersimpan pada objek atau array JavaScript bersifat sementara dan akan hilang jika terjadi reload (refresh) atau URL berubah pada browser. Sedangkan data yang tersimpan pada Webstorage akan bertahan lebih lama karena data tersebut telah tersimpan di storage atau penyimpanan browser.

Sebelum HTML5 muncul, setiap data aplikasi harus disimpan dalam cookie (termasuk dalam setiap server request). Webstorage ini lebih aman dan lebih banyak data dapat disimpan secara lokal, tanpa mempengaruhi kinerja dari situs web.

Berbeda dengan cookie, batas penyimpanannya jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah transfer ke server. Jumlah data yang tersimpan di web storage adalah berdasarkan domain. Artinya, hanya domain tersebut yang dapat mengakses setiap data pada domain webnya sendiri. Web storage dapat menampung data hingga sebesar 10MB per satu domain.

Web storage merupakan penyimpanan per asal (per domain dan protocol). Artinya semua page dari satu domain sumber dapat menyimpan dan mengakses data yang sama.

Dukungan Browser Webstorage API

Sebelum mengaplikasikan Webstorage, kita perlu terlebih dahulu memastikan dukungan browser terhadap fitur tersebut. Seharusnya browser yang kita pakai saat ini sudah mendukung fitur tersebut, misalnya Google Chrome dan Mozilla Firefox. Berikut merupakan versi browser yang support dengan Webstorage API:

Lalu, untuk mengetahui apakah browser support dengan Webstorage API, kalian dapat menggunakan cara berikut:

if (typeof(Storage) !== "undefined") {
  // Excellent! Web Storage Didukung
} else {
  // Sorry! Web Storage Tidak Didukung
}

Tipe Webstorage API

Web API telah menyediakan dua tipe Webstorage untuk kita gunakan, yaitu Session Storage dan Local Storage. Session Storage berfungsi untuk menyimpan data selama satu sesi, artinya data akan hilang saat tab browser ditutup oleh pengguna). Sedangkan Local Storage berfungsi untuk menyimpan data tanpa sesi (tanpa expired).

Pada sessionStorage atau localStorage, datanya bernilai primitif seperti number, boolean, atau string. Namun, kita juga bisa menyimpan data dalam bentuk objek dengan mengubahnya ke string, begitu pula sebaliknya jika ingin menggunakan datanya kembali. 

Untuk merubah atau menyimpan dan kemudian mengakses data pada Webstorage, metode yang digunakan adalah key-value. Pada kasus ini, key menjadi sebuah kunci untuk mengakses data pada Webstorage.

1. Session Storage pada Webstorage API

Session Storage berfungsi untuk menyimpan data sementara pada browser. Seperti yang telah dijelaskan di atas, data akan hilang jika browser atau tab browser ditutup.

Untuk menggunakan Session Storage dapat menggunakan object sessionStorage, kemudian kita memakai setItem() untuk menyimpan data, method ini membutuhkan dua argumen yaitu key dan nilai yang akan dimasukkan. Selanjutnya, untuk mengakses data yang sudah disimpan kita dapat menggunakan method getItem() dan juga key sebagai argumen dari method tersebut.

Contoh implementasi session storage:

<!DOCTYPE html>
<html>
<head>
   <title>Session Storage</title>
</head>
<body>
   <p>Spam tombol di bawah!</p>
   <button style="padding:10px;" id="tombol">Spam!</button>
   <script>
       const cacheKey = "NUMBER";
       if (typeof(Storage) !== "undefined") {
           if (sessionStorage.getItem(cacheKey) === "undefined") {
               sessionStorage.setItem(cacheKey, 0);
           }
           const button = document.querySelector("#tombol");
           const count = document.querySelector("#tombol");
           button.addEventListener('click', function(event) {
               let number = sessionStorage.getItem(cacheKey);
               number++;
               sessionStorage.setItem(cacheKey, number);
               count.innerText = sessionStorage.getItem(cacheKey);
           })
       } else {
           alert("Browser not support Webstorage")
       }
   </script>
</body>
</html>

Pada implementasi di atas, jika kita reload pada browser maka data pada tombol akan tetap bertahan, namun data pada tombol akan hilang apabila tab browser atau browser ditutup oleh pengguna.

2. Local Storage pada Webstorage API

Local Storage mirip dengan session storage, bedanya data yang disimpan pada local storage tidak akan hilang bila browser atau tabs browser ditutup. Kita dapat menghapus data pada local storage menggunakan method removeItem().

Untuk pemakaian localStorage ini identik dengan sessionStorage, perbedaannya terletak pada storage yang diakses melalui object localStorage.

Contoh implementasi local storage:

<!DOCTYPE html>
<html>
<head>
   <title>Local Storage</title>
</head>
<body>
   <p>Spam tombol di bawah!</p>
   <button style="padding:10px;" id="tombol">Spam!</button>
   <button style="margin-left:20px;" id="clear">Hapus Storage</button>
   <script>
       const cacheKey = "NUMBER";
       if (typeof(Storage) !== "undefined") {
           if (localStorage.getItem(cacheKey) === "undefined") {
               localStorage.setItem(cacheKey, 0);
           }
           const button = document.querySelector("#tombol");
           const clearButton = document.querySelector("#clear")
           const count = document.querySelector("#tombol");
           button.addEventListener('click', function(event) {
               let number = localStorage.getItem(cacheKey);
               number++;
               localStorage.setItem(cacheKey, number);
               count.innerText = localStorage.getItem(cacheKey);
           });
           clearButton.addEventListener('click', function(event) {
               localStorage.removeItem(cacheKey);
           });
       } else {
           alert("Browser tidak mendukung Web Storage")
       }
   </script>
</body>
</html>

Jika kita perhatikan, data hitungan pada tombol tidak berubah jika halaman ter-refresh. Namun, jika kita klik “Hapus Storage” maka data hitungan akan terhapus. Maka dapat kita ketahui bahwa data yang tersimpan pada local Storage akan tetap bertahan walaupun jendela browser atau tab browser kita close. Salah satu cara untuk menghapus datanya bisa dengan memanggil method localStorage.removeItem() seperti yang telah kita praktekkan pada tombol “Hapus Storage”.

Nah, sekarang kita telah memahami apa itu Webstorage API secara lengkap, mulai dari dukungan browser pada Webstorage API hingga beserta tipe-tipenya. Selanjutnya, kita akan membahas Geolocation API pada artikel Memahami 3 Api Model pada HTML5 Part 2.