Penyimpanan sisi klien sangat penting untuk aplikasi web. Ini mungkin tidak antipeluru seperti penyimpanan sisi server tetapi, tanpa itu, aplikasi web tidak akan dapat mengimplementasikan banyak fitur modern. Semua jenis fitur bergantung pada penyimpanan sisi klien, dari sesi dalam game hingga keranjang belanja di situs web e-niaga.
Penyimpanan sisi klien juga memungkinkan aplikasi web untuk menerapkan arsitektur yang berpusat pada privasi. Anda dapat menggunakannya untuk memastikan data sensitif tidak pernah keluar dari perangkat pengguna.
Apa itu Penyimpanan Sisi Klien?
Dalam pengembangan web, penyimpanan sisi klien mengacu pada berbagai cara browser web dapat menyimpan data. Aplikasi kemudian dapat menggunakan data ini untuk menyediakan fungsionalitas kepada pengguna. Penyimpanan sisi klien sangat penting karena beberapa alasan:
- Data yang disimpan di klien secara signifikan lebih cepat untuk diakses, dan aplikasi Anda dapat mengaksesnya tanpa internet.
- Penyimpanan sisi klien memudahkan aplikasi Anda untuk mengingat preferensi setiap pengguna.
- Menyimpan beberapa data secara permanen di klien memudahkan untuk melindungi privasi pengguna.
- Menyimpan semua data aplikasi di server mahal, terutama dalam skala besar.
Ada beberapa bentuk penyimpanan sisi klien yang berbeda yang dapat Anda gunakan di aplikasi web Anda.
Kue
Cookie browser adalah bagian dari data kunci/nilai yang disimpan sebagai string di komputer Anda. Browser mengirim semua cookie untuk situs tertentu ke server situs pada setiap permintaan. Cookie adalah yang pertama (dan untuk sementara, satu-satunya) jenis penyimpanan sisi klien.
Tidak ada batasan resmi untuk ukuran cookie, tetapi masing-masing browser memberikan batasan yang berbeda-beda pada ukuran dan jumlah cookie yang dapat Anda atur. Itu RFC 6265 Bagian 6.1 menyatakan kemampuan cookie minimum berikut yang harus disediakan oleh browser (agen pengguna):
Implementasi agen pengguna yang praktis memiliki batasan jumlah dan ukuran cookie yang dapat mereka simpan. Agen pengguna penggunaan umum HARUS menyediakan masing-masing kemampuan minimum berikut:
- Setidaknya 4096 byte per cookie (yang diukur dengan jumlah panjang nama, nilai, dan atribut cookie).
- Setidaknya 50 cookie per domain.
- Setidaknya 3000 cookie total.
Cookie dapat tetap berada di browser untuk jangka waktu yang bervariasi. Beberapa kedaluwarsa pada akhir sesi halaman, dan beberapa memiliki tanggal kedaluwarsa sewenang-wenang yang dapat meregang hingga berbulan-bulan ke depan.
Browser membuat sesi halaman saat Anda membuka tab baru, dan mereka mengakhirinya saat Anda menutup tab atau browser. Jika Anda memuat ulang atau menyegarkan halaman, browser tidak akan mengakhiri sesi halaman.
Gunakan Kasus untuk Cookie
Cookie paling cocok untuk menyimpan potongan kecil data yang sering perlu dibaca atau dimodifikasi oleh server. Mengapa?
- Cookie secara otomatis dilampirkan ke semua permintaan jaringan
- Cookie hanya dapat menyimpan sejumlah kecil data string.
Anda dapat menggunakan cookie untuk mengidentifikasi pengguna (seperti ID sesi), merekam kunjungan halaman untuk tujuan bookmark, atau menyimpan skor tinggi game.
Penyimpanan lokal
Seperti cookie, localStorage adalah penyimpanan kunci/nilai yang menyimpan data string. Meskipun kedua jenis penyimpanan serupa, penyimpanan lokal dan cookie berbeda dalam beberapa hal:
- Penyimpanan Lokal bergantung pada JavaScript.
- Data di localStorage berada terutama di browser. Anda harus dengan sengaja mengirimkannya ke server, alih-alih browser mengirimkannya pada setiap permintaan.
- Penyimpanan Lokal tidak memiliki tanggal kedaluwarsa. Itu tetap ada di klien hingga pengembang menghapusnya dengan JavaScript atau pengguna mengosongkan penyimpanan browser mereka.
- LocalStorage memiliki kapasitas penyimpanan yang jauh lebih besar. Itu Spesifikasi WHATWG tidak menentukan batas keras tetapi, menurut Wikipedia, ukuran minimum penyimpanan lokal di antara browser utama adalah 5 MB:
Browser membatasi cookie hingga 4 kilobyte. Penyimpanan web menyediakan kapasitas penyimpanan yang jauh lebih besar:
- Opera 10.50+ memungkinkan 5 MB
- Safari 8 memungkinkan 5 MB
- Firefox 34 memungkinkan 10 MB
- Google Chrome memungkinkan 10 MB per asal
- Internet Explorer memungkinkan 10 MB per area penyimpanan
Gunakan Kasus untuk Penyimpanan Lokal
LocalStorage sangat cocok untuk menyimpan sejumlah besar data yang jarang perlu dirujuk oleh server. Ini bisa berupa pengaturan pengguna aplikasi, detail konfigurasi tema, atau data dalam formulir yang baru saja diisi. Ini karena penyimpanan lokal memiliki batas penyimpanan yang jauh lebih besar daripada cookie, tetapi Anda harus melalui upaya ekstra untuk mengirim datanya ke server.
Jika Anda menyimpan data sebagai JSON, Anda dapat menyimpan data yang cukup kompleks menggunakan localStorage, meskipun hanya dapat menyimpan string.
Penyimpanan Lokal rentan terhadap Serangan XSS, jadi Anda tidak boleh menyimpan data klien yang sensitif di dalamnya.
Penyimpanan Sesi
SessionStorage adalah penyimpanan kunci/nilai yang berfungsi hampir sama dengan penyimpanan lokal, kecuali satu hal. Data yang disimpan hanya bertahan selama sesi halaman.
Gunakan Kasus untuk SessionStorage
Anda dapat menggunakan SessionStorage untuk menyimpan jenis data yang sama dengan localStorage, tetapi hanya jika data tidak perlu disimpan di luar sesi halaman.
DiindeksDB
IndexedDB adalah API browser yang kuat untuk menyimpan sejumlah besar data terstruktur. Ini adalah database transaksional berorientasi objek yang menyimpan data dalam pasangan kunci/nilai.
Jika Anda berurusan dengan jumlah data yang lebih kecil, localStorage/sessionStorage adalah pilihan yang lebih baik dan lebih mudah. Sayangnya, mereka dibatasi oleh kapasitas penyimpanannya dan fakta bahwa mereka hanya dapat menyimpan data string. IndexedDB tidak hanya memungkinkan penyimpanan berbagai jenis data termasuk file/data biner, tetapi juga dapat menyimpan lebih banyak data. IndexedDB juga membangun indeks isinya untuk memungkinkan pencarian database dengan cepat.
Gunakan Kasus untuk IndexedDB
IndexedDB pada dasarnya adalah database NoSQL di browser, dan dapat menyimpan data dalam jumlah yang sangat besar. Setiap kasus penggunaan yang memerlukan penyimpanan lebih dari 10 MB data sesuai untuk IndexedDB.
Berbeda dengan bentuk penyimpanan browser lainnya, IndexedDB tidak terbatas pada penyimpanan string. IndexedDB dapat menyimpan data dari semua jenis JavaScript standar. Jika Anda membuat aplikasi web untuk bekerja terutama secara offline, Anda dapat menggunakan IndexedDB untuk menyimpan semua data aplikasi.
Penyimpanan Sisi Klien Fleksibel dan Kuat
Istilah penyimpanan sisi klien mengacu pada penyimpanan data aplikasi di browser. Penyimpanan sisi klien sangat penting untuk berfungsinya sebagian besar aplikasi web modern. Ada berbagai jenis penyimpanan sisi klien: cookie, local/sessionStorage, dan IndexedDB.
Semua jenis penyimpanan browser memiliki batasan yang berbeda-beda pada kapasitasnya dan jenis data yang dapat disimpannya. Cookie adalah jenis yang paling terbatas, local/sessionStorage adalah yang paling nyaman, dan IndexedDB adalah yang paling kuat.
