Form di HTML adalah cara yang paling umum digunakan untuk mendapatkan data yang diinput user. Kalau form yang ada di web kita banyak atau ada form yang harus diisi dengan data yang panjang, meng-cache data yang diinput user mungkin bukan ide yang buruk. Tujuannya adalah apabila user tidak sengaja menutup browser atau pindah ke halaman lain ketika mengisi form, user dapat kembali ke halaman dan melanjutkan mengisi form tanpa harus mengulang dari awal.
Artikel ini akan memberikan cara meng-cache user input dengan localStorage di javascript. Catatan: Jangan menyimpan data sensitif, misalkan data kartu kredit atau password user di localStorage!! LocalStorage adalah sebuah object di javascript yang memungkinkan kita untuk menyimpan data string dengan model penyimpanan key: value. Total maksimum data yang bisa disimpan adalah sebesar 5MB. LocalStorage
spesifik pada origin dari suatu halaman. Ini berarti localStorage kita tidak bisa mengakses localStorage domain lain, begitu juga sebaliknya. LocalStorage di support oleh semua browser utama. Kita akan membuat
HTML simple dengan sebuah form dan beberapa input. Untuk setiap input, kita memasang listener Simpan file dengan nama page1.html . Halaman ini berisi sebuah form dengan sebuah link ke halaman lain untuk menguji apakah cache nya berhasil atau tidak.Pada setiap tag input, tambahkan listener Function
ini memanggil fungsi setItem dari localStorage dengan nilai dari attribute name sebagai key nya.Pada document load kita pasang listener untuk mengecek apakah ada data yang tersimpan di cache. Kalau ada kita akan ambil dan set datanya ke form.
Sekarang kita coba buka halaman nya di browser. Untuk contoh ini saya gunakan golang untuk server static file. Kamu bisa gunakan yang lain kalau mau. Static file server menggunakan golang:
Buat
folder assets dan letakkan file html di folder tersebut. Jalankan Coba input sesuatu di bagian input. Jangan di submit dulu. Coba klik go to page2, kemudian back ke page1. Kamu akan melihat data yang kamu input tadi masih ada di form. Coba tutup halaman kemudian buka lagi. Kemudian coba sumbit form nya kemudian kembali ke page1. Setelah di sumbit data yang di input masih ada di form. Untuk mengosongkan cache setelah data di submit bisa menggunakan fungsi ini:
LocalStorage sangan berguna dan mempunyai beberapa kelebihan dibanding dengan cookies. Selain mempunyai kapasitas yang lebih besar, localStorage tidak di kirim dalam setiap request ke back end. Sehingga dapat menghemat bandwith. Yang terpenting adalah: Jangan menyimpan data sensitif, misalkan data kartu kredit atau password user di localStorage!! Langkah langkah clear cache?Di Chrome. Di komputer, buka Chrome.. Di kanan atas, klik Lainnya .. Klik Fitur lainnya. Hapus data browsing.. Di bagian atas, pilih rentang waktu. Untuk menghapus semua, pilih Semua.. Di samping "Cookie dan data situs lainnya" dan "Gambar dan file dalam cache", centang kotaknya.. Klik Hapus data.. Clear cache gunanya untuk apa?Melansir dari Amazon, berikut adalah beberapa fungsi dan manfaat cache. Ketika cache dihapus, data atau informasi yang terdapat dalam sebuah aplikasi atau website akan turut terhapus. Sehingga, ketika user ingin kembali mengunjungi website atau membuka suatu aplikasi, ia akan butuh waktu yang lebih lama.
Apa itu cache di Google Chrome?Melansir Business Insider, cache adalah lokasi penyimpanan khusus yang mengumpulkan data secara sementara untuk membantu laman web, browser, dan aplikasi memuat lebih cepat. Dengan cache maka akan memudahkan browser untuk mengambil data dengan cepat sehingga kamu bisa browsing dengan lebih nyaman.
|