Apakah seluruh browser dengan seluruh versi yang ada mendukung fitur web storage?

Kita sudah sampai di penghujung materi dari kelas ini. Selamat bagi Anda yang sudah menguasai dasar dari tiga pilar pembentuk website. Pada materi kali ini kita akan berkenalan mengenai salah satu web API yang menarik untuk diterapkan pada proyek kalkulator, yakni Web Storage.

Table of Contents Show

Session Storage
Local Storage
Menyiapkan Tabel Elemen
Video yang berhubungan

Web storage adalah salah satu Web API yang dapat menyimpan data secara lokal pada sisi client. Berbeda dengan objek atau array, data yang disimpan pada objek atau array JavaScript bersifat sementara, dan akan hilang jika terjadi reload atau pergantian URL pada browser. Sedangkan data yang disimpan pada Web Storage akan bertahan lebih lama karena data akan disimpan pada storage browser.

Sebelum HTML5, kita melakukan hal ini dengan menggunakan cookies, namun penyimpanan cookies terbatas. Dengan hadirnya Web Storage kita dapat menampung data lebih besar dan tentunya lebih aman.

Data yang disimpan web storage tersedia berdasarkan domain. Artinya, data pada suatu domain web hanya dapat diakses oleh domainnya itu sendiri. Web storage dapat menampung sebesar 10MB untuk satu domain.

1. Tipe Web Storage

Web API menyediakan dua tipe Web Storage untuk kita gunakan, yakni sessionStorage dan localStorage.

Sebelum menggunakan Web Storage baik sessionStorage atau localStorage, kita perlu memastikan browser support terhadap fitur tersebut, dengan cara:

if (typeof(Storage) !== "undefined") { // Browser mendukung sessionStorage/localStorage. } else { // Browser tidak mendukung sessionStorage/LocalStorage }

Seharusnya browser yang ada pada saat ini sudah mendukung kedua fitur tersebut. Google Chrome dan Mozilla Firefox tentu memilikinya.

Pada sessionStorage atau localStorage data yang disimpan adalah nilai primitif seperti number, boolean, atau string. Namun kita juga dapat menyimpan data berbentuk objek dengan mengubahnya dalam bentuk string, begitu pula sebaliknya ketika kita ingin menggunakan datanya kembali.

Untuk menyimpan dan mengakses data pada storage, metode yang digunakan adalah key-value. Di sini key menjadi sebuah kunci untuk mengakses data pada storage.

Data yang disimpan pada Web Storage dapat kita lihat menggunakan DevTools pada tab Application (Google Chrome) atau tab Storage (Mozilla Firefox).

Data Local Storage pada Google Chrome

Data Local Storage pada Mozilla Firefox

Session Storage

Tipe storage yang pertama adalah Session Storage yang mana digunakan untuk menyimpan data sementara pada browser. Data akan hilang ketika browser atau tab browser ditutup.

Untuk menggunakan Session Storage kita gunakan object sessionStorage, kemudian untuk menyimpan datanya gunakan method setItem(), method ini membutuhkan dua argumen yakni key dan nilai yang akan dimasukkan. Kemudian untuk mengakses data yang sudah dimasukkan kita gunakan method getItem() dan gunakan key sebagai argumen methodnya.

Berikut contoh penerapan dari session storage:

<!DOCTYPE html> <html> <head> <title>Session Storage</title> </head> <body> <p>Anda sudah menekan tombol sebanyak <span id="count"></span> kali</p> <button id="button">Click Disini!</button> <script> const cacheKey = "NUMBER"; if (typeof(Storage) !== "undefined") { // pengecekkan apakah data sessionStorage dengan key NUMBER tersedia atau belum if (sessionStorage.getItem(cacheKey) === "undefined") { // Jika belum maka akan atur dengan nilai awal yakni 0 sessionStorage.setItem(cacheKey, 0); } const button = document.querySelector("#button"); const count = document.querySelector("#count"); button.addEventListener('click', function(event) { let number = sessionStorage.getItem(cacheKey); number++; sessionStorage.setItem(cacheKey, number); count.innerText = sessionStorage.getItem(cacheKey); }) } else { alert("Browser tidak mendukung Web Storage") } </script> </body> </html>

Bisa kita lihat bahwa data yang disimpan pada sessionStorage akan bertahan jika terjadi reload pada browser, namun data tersebut akan hilang apabila tab browser atau browser itu sendiri ditutup.

Local Storage

Tipe storage yang kedua adalah Local Storage yang serupa dengan session storage, namun data yang disimpan tidak akan hilang bila browser atau tabs browser ditutup. Kita bisa menghapus data pada local storage dengan method removeItem().

Untuk penggunaan localStorage identik dengan sessionStorage, perbedaanya storage ini diakses melalui object localStorage.

Berikut contoh penerapan dari local storage:

<!DOCTYPE html> <html> <head> <title>Local Storage</title> </head> <body> <p>Anda sudah menekan tombol sebanyak <span id="count"></span> kali</p> <button id="button">Click Disini!</button> <button id="clear">Hapus Storage</button> <script> const cacheKey = "NUMBER"; if (typeof(Storage) !== "undefined") { // pengecekkan apakah data sessionStorage dengan key NUMBER tersedia atau belum if (localStorage.getItem(cacheKey) === "undefined") { // Jika belum maka akan atur dengan nilai awal yakni 0 localStorage.setItem(cacheKey, 0); } const button = document.querySelector("#button"); const clearButton = document.querySelector("#clear") const count = document.querySelector("#count"); 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>

Pada gif di atas kita bisa mengetahui bahwa data yang disimpan pada localStorage akan bertahan walaupun jendela browser atau tab browser ditutup, untuk menghapus datanya bisa dengan tombol “Hapus Storage” dimana tombol tersebut akan memanggil method localStorage.removeItem().

Bagaimana? Cukup mudah kan untuk menggunakan Web Storage? Selanjutnya kita akan coba terapkan localStorage pada Web Kalkulator yang kita buat untuk menampung riwayat kalkulasi yang pengguna lakukan.

2. Menambahkan Riwayat Kalkulasi pada Web Kalkulator - Bagian 1

Kali ini kita akan menerapkan apa yang sudah dipelajari sebelumnya mengenai Web Storage. Pada kasus ini tipe storage yang cocok untuk digunakan pada Web Kalkulator adalah localStorage, karena data akan tetap bertahan meskipun browser sudah tertutup.

Kita akan memisahkan berkas JavaScript yang akan kita buat kali ini dengan yang sudah kita buat sebelumnya. Jadi untuk langkah awal silakan buka kembali proyek kalkulator yang sudah kita buat, buat berkas JavaSript baru di dalam folder assets kemudian beri nama “storage.js”.

Maka struktur proyek sekarang nampak seperti gambar berikut:

Sebelum menuliskan kode pada berkas storage.js, kita siapkan terlebih dahulu elemen table untuk menampilkan daftar riwayat kalkulasi.

Menyiapkan Tabel Elemen

Silakan buka berkas index.html, kemudian buat elemen div baru dengan menerapkan nilai class history dan card. Letakan elemen tersebut tepat di atas tag <script> pada akhir </body>.

....... <div class="history card"> </div> <script src="assets/kalkulator.js"></script> </body>

Kemudian di dalam elemen <div> tersebut buat elemen heading dan table seperti pada kode berikut:

<div class="history card"> <h2>Riwayat Perhitungan</h2> <table> <thead> <tr> <th>Angka Pertama</th> <th>Operator</th> <th>Angka Kedua</th> <th>Hasil</th> </tr> </thead> <tbody id="historyList"></tbody> </table> </div>

Elemen <tbody> yang kita beri id historyList merupakan elemen yang akan menampung data dinamis berdasarkan data dari localStorage yang ada. Kita akan memberi konten pada elemen ini secara dinamis menggunakan JavaScript nantinya.

Keseluruhan berkas pada index.html sekarang akan nampak seperti ini:

<!DOCTYPE html> <html> <head> <title>Web Calculator</title> <link rel="stylesheet" href="assets/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="flex-container-column card"> <div class="display"> <h1 id="displayNumber">0</h1> </div> <div class="flex-container-row"> <div class="button">7</div> <div class="button">8</div> <div class="button">9</div> <div class="button negative">+/-</div> </div> <div class="flex-container-row"> <div class="button">4</div> <div class="button">5</div> <div class="button">6</div> <div class="button operator">-</div> </div> <div class="flex-container-row"> <div class="button">1</div> <div class="button">2</div> <div class="button">3</div> <div class="button operator">+</div> </div> <div class="flex-container-row"> <div class="button clear">CE</div> <div class="button">0</div> <div class="button equals double">=</div> </div> </div> <div class="history card"> <h2>Riwayat Perhitungan</h2> <table> <thead> <tr> <th>Angka Pertama</th> <th>Operator</th> <th>Angka Kedua</th> <th>Hasil</th> </tr> </thead> <tbody id="historyList"></tbody> </table> </div> <script src="assets/kalkulator.js"></script> </body> </html>

Jika kita buka berkas index.html pada browser akan tampak seperti ini:

Selanjutnya kita akan menerapkan styling pada tabel riwayat agar informasi pada lebih mudah dibaca.

3. Menambahkan Riwayat Kalkulasi pada Web Kalkulator - Bagian 2

Sebelumnya kita sudah membuat elemen tabel yang nantinya akan menjadi tempat informasi riwayat kalkulasi, namun tampilannya masih kurang baik. Kita akan merombaknya dengan menerapkan CSS pada elemen tersebut.

Silakan buka berkas style.css, kemudian tambahkan rule berikut:

.history { width: 80%; margin: 30px auto 0 auto; overflow: scroll; }

Rule tersebut akan mengatur lebar 80% dari viewport pada elemen <div> yang menerapkan class history. Kemudian terapkan pada properti overflow dengan nilai scroll sehingga elemen <div> akan memiliki scroll bar secara horizontal dan vertikal.

Lalu tambahkan juga rule berikut pada style.css:

table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; }

Rule tersebut akan membuat tabel memiliki lebar 100% terhadap parentnya dan menetapkan border pada tepian tabelnya.

Lanjut kita tambahkan rule berikut untuk mengatur padding pada table head (<th>) dan table data (<td>) agar ukuran tampak lebih proporsional.

th, td { text-align: center; padding: 16px; }

Lalu kita tambahkan rule berikut untuk menerapkan backgroud-color pada element <th> dan <tr>, sementara untuk elemen <tr> kita manfaatkan pseudo-class dalam selectornya.

th { background-color: orange; color: white; } tr:nth-child(even) { background-color: #d2d2d2; }

Untuk mengoptimalkan tampilan pada perangkat seluler, kita atur elemen <div> untuk menerapkan width: 100% pada @media query.

@media screen and (max-width: 513px) { .button { padding: 10px; } .history { width: 100%; } }

Sekarang struktur kode pada berkas styles.css akan tampak seperti ini:

* { box-sizing: border-box; } body { font-family: sans-serif; } .flex-container-column { display: flex; /* properti pendukung */ flex-direction: column; max-width: 800px; margin: 0 auto; text-align: right; } .flex-container-row { display: flex; } .button { flex-basis: 25%; /* properti pendukung */ font-size: 1.5em; text-align: center; padding: 40px; border: 1px solid black; background: -webkit-linear-gradient(top, #d2d2d2, #ddd); cursor: pointer; } .double { flex-basis: 50%; } .display { color: white; width: 100%; padding: 10px 20px; background-color: #333333; border: 1px solid black; font-size: 2em; } .operator, .negative, .equals { background: orange; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); border-radius: 5px; padding: 30px; margin-top: 20px; } .button:hover { font-weight: bold; } .history { width: 80%; margin: 30px auto 0 auto; overflow: scroll; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { text-align: center; padding: 16px; } th { background-color: orange; color: white; } tr:nth-child(even) { background-color: #d2d2d2; } @media screen and (max-width: 513px) { .button { padding: 10px; } .history { width: 100%; } }

Setelah persiapan tampilan table selesai, selanjutnya kita akan mulai menerapkan JavaScript untuk mengelola data riwayat kalkulasinya.

4. Menambahkan Riwayat Kalkulasi pada Web Kalkulator - Bagian 3