Membedah Web Applications — Storage
Tidak bisa dipungkiri bahwa aplikasi berbasis website masih banyak digunakan untuk menjawab kebutuhan bisnis. Seperti halnya, backoffice administrator, dashboard monitoring, dashboard statistics atau aplikasi mobile website yang menggunakan progressive web applications. Tentu terdapat pros and cons. Salah satu kelebihannya adalah #GakPakeDonlot cukup buka browser.
Kali ini kita akan membedah website applications dan keterkaitan lainnya seputar Software Engineering. Topik awal akan dimulai dengan salah satu fundamental dari web applications, yaitu web storage. Web browser seperti (Google Chrome, Mozilla Firefox, Microsoft Edge, dan Safari) telah didukung Web Storage. Storage pada web applications terdapat 3 jenis, antara lain yaitu Local Storage, Session Storage, dan Cookies.
Apa Itu Web Storage?
Web Storage merupakan salah satu mekanisme penyimpanan yang mengizinkan web applications untuk menyimpan data pada web browser. Sejak kemunculan HTML5, web storage muncul setelah cookies. Web Storage terdiri dari dua tipe, yaitu Local Storage dan Session Storage. Data yang disimpan web storage tersedia berdasarkan domain. Penyimpanan data pada web storage sebesar 10MB. Selain itu, web storage berfungsi untuk menyimpan dan mengakses data secara client-side.
Untuk mengecek apakah web browser mendukung web storage dapat menggunakan code berikut:
if (typeof(Storage) !== “undefined”) {
//browser mendukung web storage
} else {
//browser tidak mendukung web storage
}Web storage dapat diakses dengan melakukan inspect element pada web browser. Jika di Safari, dan Mozilla Firefox terdapat di Tab Storage. Jika di Google Chrome, dan Microsoft Edge terdapat di Tab Application. Storage tersebut merupakan letak di mana Cookies, Local Storage, dan Session Storage berada.
Safari
Google Chrome
Mozilla Firefox
Microsoft Edge
Session Storage
Session Storage digunakan untuk menyimpan data sementara pada browser. Data akan hilang ketika browser atau tab browser ditutup. Untuk menggunakan Session Storage dapat menggunakan object sessionStorage. Method setItem() untuk menyimpan data, dan getItem() untuk mengakses datanya. Method setItem() membutuhkan dua parameter yakni Key dan Value, sedangkan untuk method getItem() hanya membutuhkan Key sebagai parameter methodnya.
Code contoh penerapan dari Session Storage:
sessionStorage.setItem(“key”, “value”);
sessionStorage.getItem(“key”);Local Storage
Local Storage hampir mirip dengan session storage, tetapi data yang disimpan tidak akan hilang jika browser atau tabs browser ditutup. Data pada local storage dapat dihapus dengan method removeItem() atau dengan membersihkan Cache pada web browser. Method untuk menyimpan dan mengakses data pada Local Storage sangat identik dengan Session Storage, namun perbedaannya terdapat pada object yang digunakan, yaitu localStorage.
Code contoh penerapan dari Local Storage:
localStorage.setItem(“key”, “value”);
localStorage.getItem(“key”);
localStorage.removeItem(“key”);Cookies
Cookies merupakan penyimpanan data aktivitas pengguna web browser pada sebuah website. Cookies memungkinkan untuk menyimpan data informasi pengguna secara server-side dengan menggunakan HTTP Request. Ukuran cookies hanya 4KB. Cookies memiliki tenggat waktu kadaluwarsa. Jika tenggat waktu kadaluwarsa kosong maka cookies akan dihapus ketika koneksi dengan server ditutup. Tidak seperti web storage, cookies memiliki 12 parameter:
· Name — Nama dari cookies
· Value — Nilai cookies
· Domain — Domain dari cookies
· Path — Properties path dari cookies
· Expires / Max-Age — Tenggat waktu kadaluwarsa dari cookies
· Size — Ukuran(bytes) dari cookies
· HttpOnly — Cookies HTTPOnly atau tidak
· Secure — Cookies aman atau tidak?
· SameSite — Apakah cookies sama situsnya?
· Last accessed — Waktu terakhir cookies diakses
· Created — Waktu cookies dibuat
· HostOnly — Domain dari cookies
Code contoh penerapan dari Cookies:
Cookies.set(‘name’, ‘value’);
Cookies.get(‘name’);Jadi, storage mana yang terbaik? Jawabannya tergantung kebutuhan dan tujuan. Cookies digunakan untuk mengakses data secara server-side, sedangkan Local Storage digunakan untuk mengakses data secara client-side yang tidak akan hilang datanya jika browser atau tabs browser ditutup, di lain sisi Session Storage digunakan untuk mengakses data secara client-side yang akan hilang datanya jika browser atau tabs browser ditutup.
Akhirnya kita di penghujung pembedahan Web Applications terkait Storage. Semoga bermanfaat dan mari kita bedah lagi teknologi yang terkait dengan Web Applications di lain kesempatan. See you next time.
References:
· https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
· https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
· https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
· https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer
· https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies
· https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector/Cookies
