localStorage vs sessionStorage vs Cookies – Perbandingan Mendetail

Cookie telah bersama kami untuk waktu yang lama (Internet Explorer v2 memiliki dukungan untuk mereka pada bulan Oktober 1995). Tidak ada yang salah dengan mereka, dan mereka tentu saja membuat web menjadi tempat yang lebih menyenangkan, tetapi setelah hampir 25 tahun banyak yang berubah.

Penyimpanan Lokal (Anda akan menemukannya di Penyimpanan Web di W3) adalah dan bukan pengganti cookie. Itu yang paling membingungkan. Dalam kebanyakan kasus, Anda dapat dengan aman menggunakan localStorage alih-alih cookie dan mendapatkan kesan (salah) bahwa keduanya sama, padahal sebenarnya tidak. Baca terus untuk melihat rincian tanpa basa-basi tentang bagaimana dan kapan menggunakan localStorage untuk mengganti cookie.

Revolusi atau evolusi?

Penyimpanan lokal, atau Penyimpanan lokal, atau penyimpanan DOM atau penyimpanan web (saya tidak mengarang nama ini; semuanya sedang digunakan, dan semuanya merujuk pada hal yang sama) mendapat adopsi dunia nyata di antara browser populer pada tahun 2012 sebagai "HTML5 fitur". Itu tampak seperti pengganti kue kering. Perbaikan untuk permintaan yang membengkak yang membawa data yang tidak dibutuhkan sepanjang waktu dan batasan ukuran. Meskipun "memecahkan" masalah itu, ini bukan pengganti apel untuk apel untuk cookie.

Dan sementara kita berada di topik data yang tidak dibutuhkan. Tahukah Anda bahwa permintaan bukan satu-satunya hal yang dapat menyebabkan kembung yang tidak perlu, situs Anda juga bisa. Untungnya, ada solusinya, dan itu disebut WP Reset.

WP Reset adalah plugin yang hadir dengan berbagai opsi pengaturan ulang yang memungkinkan Anda melakukan hal-hal seperti menghapus akumulasi data dan/atau add-on (plugin, tema, pengguna, widget, konten, dll.) dari situs Anda, dan bahkan menghapus seluruh situs Anda hingga bersih. Menakjubkan, bukan? Tapi itu tidak semua. Di antara fitur lainnya, plugin ini dapat membuat snapshot database serta koleksi plugin dan tema yang dapat Anda instal dengan sekali klik sebanyak yang Anda perlukan. Pasti alat yang layak untuk dicoba.

Tapi, sekarang, mari kembali berbicara tentang localStorage.

Sesuai dengan namanya, data disimpan secara lokal, di perangkat pengguna. Oleh karena itu tidak harus ditransfer melalui jaringan dengan setiap permintaan HTTP mengurangi jejak dan memberi kami lebih banyak ruang untuk menyimpan data. Paradigma "khusus lokal" itu adalah perbedaan paling signifikan antara cookie dan penyimpanan lokal. Cookie dapat dibaca baik di sisi server maupun sisi klien, penyimpanan lokal hanya di sisi klien. Itu saja. Jika aplikasi Anda sangat bergantung pada membaca cookie di sisi server dan menghasilkan konten berdasarkan itu, maka beralih ke penyimpanan lokal berarti menulis ulang aplikasi. Jika Anda hanya menggunakan cookie untuk menyimpan pengaturan seperti tab mana yang aktif di antarmuka, maka penyimpanan lokal adalah pengganti yang ideal.

Sangat mirip

Tabel di bawah ini memberikan wawasan yang jelas tentang perbedaan dan kasus penggunaan cookie, penyimpanan lokal, dan penyimpanan sesi. Meskipun Anda dapat dengan cepat meliriknya untuk mendapatkan jawaban yang Anda butuhkan dan pergi, saya sarankan membaca catatan kaki yang agak panjang yang membahas lebih detail. Ya, saya tahu Anda sibuk dan ingin melihat video kucing berikutnya, tetapi semuanya tidak hitam dan putih, jadi menggali lebih dalam akan membantu Anda.

Menggali lebih dalam penyimpanan & cookie web

Jumlah maksimum data yang dapat Anda simpan secara lokal bergantung pada browser. Tidak ada jaminan dan jika Anda ingin taruhan yang aman, turunkan di bawah 5 MB, menjadi sekitar 2 MB. Gunakan alat praktis ini untuk menguji ukuran penyimpanan lokal maksimum yang diizinkan di browser Anda.

Ini adalah skenario umum bagi pengguna untuk memblokir pihak ketiga atau semua cookie . Aturan yang sama berlaku untuk penyimpanan lokal. Tidak ada jaminan, dan aplikasi Anda harus berfungsi (atau setidaknya tidak rusak) di lingkungan tempat penyimpanan lokal tidak tersedia.

Semua cookie kedaluwarsa di beberapa titik, tetapi orang cenderung mengatur masa pakai menjadi beberapa tahun yang tampaknya selamanya dalam waktu internet. Penyimpanan lokal di sisi lain tidak pernah kedaluwarsa dan tersedia sampai aplikasi atau pengguna menghapusnya. Penyimpanan sesi akan dihapus saat tab atau jendela ditutup – tidak ada pengecualian.

“Apa maksudmu hanya string yang bisa disimpan ? Saya menyimpan objek sepanjang waktu!” JSON memungkinkan Anda untuk menyimpan objek dan tipe data lainnya dalam bentuk string. Konversi dilakukan pada membaca dan menulis tanpa sepengetahuan Anda. Dengan perpustakaan suara untuk menangani cookie dan penyimpanan lokal, Anda tidak perlu memikirkan tipe data. Namun, itu tidak mengubah fakta bahwa hanya string yang didukung secara asli.

Tidak ada satu pun fitur sisi klien yang didukung oleh semua browser . Ini fakta yang menyedihkan, tapi tetap saja fakta. Anda dapat memeriksa nomor tertentu di Can I Use tetapi sejauh cookie dan penyimpanan lokal digunakan, saya akan mengabaikan semua browser yang tidak mendukungnya. Mereka marjinal dan di bawah 1%.

Anda tidak dapat mengakses penyimpanan lokal hanya melalui pemrosesan sisi server. Anda membutuhkan JS juga. Ketika pengguna meminta halaman dan PHP masuk (atau bahasa sisi server apa pun yang Anda gunakan) untuk membuatnya, Anda tidak akan memiliki akses ke data lokal, sesi, atau permanen apa pun. Setelah halaman dimuat dan JS masuk, Anda dapat mengakses data lokal dan melakukan apa pun yang Anda perlukan – sesuaikan antarmuka pengguna atau gunakan AJAX untuk mengirim data lokal kembali ke server. Jadi ya, Anda bisa mendapatkan data lokal kembali ke server tetapi tidak dengan cara dan momen yang sama seperti yang Anda lakukan dengan cookie. Bergantung pada kebutuhan Anda, ini mungkin menjadi pemecah kesepakatan ketika harus beralih dari cookie ke penyimpanan lokal, jadi, harap – rencanakan sebelumnya!

Dengan penyimpanan lokal, tidak ada data yang ditransfer antara klien dan server (kecuali ada kode yang secara eksplisit melakukannya). Ini bagus untuk mengurangi ukuran muatan. Cookie, di sisi lain, ditransfer sebagai bidang header HTTP dengan setiap permintaan pada domain yang ditetapkan. Itu tidak dapat diubah atau dimatikan secara selektif.

Pengguna “tidak boleh” mengakses data lokal dan mengubahnya secara langsung (di luar aplikasi Anda) tetapi tidak ada yang menghentikan mereka untuk melakukannya. Ada banyak alat debugging yang tersedia untuk mengedit data yang disimpan secara lokal. Jadi jangan percaya data lokal atau menganggap pengguna tidak menyentuhnya. Selalu berasumsi yang lebih buruk.

Meskipun cookie memiliki atribut "aman" yang dapat Anda atur, itu tidak melindungi cookie saat transit dari aplikasi ke browser. Jadi itu lebih baik daripada tidak sama sekali tetapi jauh dari aman. Penyimpanan lokal, menjadi teknologi hanya sisi klien tidak tahu atau peduli jika Anda menggunakan HTTP atau HTTPS. Keamanan harus datang dari cara Anda menangani data. Jangan menyimpan data sensitif seperti nomor kartu kredit atau kata sandi dalam bentuk penyimpanan lokal apa pun! Pernah!

Sedikit kode untuk membantu Anda memulai

Artikel ini tidak dimaksudkan sebagai tutorial penyimpanan web JavaScript tetapi untuk menyelamatkan Anda dari masalah, inilah contoh Hello World dengan penyimpanan lokal;

// store a value
localStorage.setItem( 'name', 'John' );

// retrieve a value
localStorage.getItem( 'name' );

// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var post = {
  title: 'Cookies are old',
  author: 'Gordan'
}
localStorage.setItem( 'post', JSON.stringify( post ) );

// and to retrieve
var post = JSON.parse( localStorage.getItem( 'post' ) );

Kode di atas berfungsi, dan sesederhana mungkin. Namun, saya tidak menyarankan menggunakannya. Seperti halnya cookie, tidak ada yang menggunakan document.cookies untuk berinteraksi dengannya. Ada perbedaan kecil antar-browser yang perlu diperhitungkan, dan karena mereka hanya menyimpan string, Anda harus merangkai dan mengurai dengan JSON pada setiap membaca dan menulis. Itu sebabnya kami menggunakan perpustakaan kecil untuk membantu kami menangani cookie seperti js-cookie. Hal yang sama berlaku untuk penyimpanan lokal. Menempatkan lapisan abstraksi kecil antara kode Anda dan API akan membantu dalam jangka panjang. Saya merekomendasikan store.js. Sudah ada untuk sementara waktu, menangani omong kosong dan fallback lintas-browser dan bahkan memiliki plugin praktis yang memperluas fitur-fiturnya. Jika Anda tertarik dengan beberapa praktik pengkodean, buat perpustakaan Anda sendiri dan ubah menjadi plugin jQuery.

Cookie itu buruk, bukan? Kami membutuhkan sesuatu yang baru!

Cookie tidak buruk. Mereka telah melayani tujuan mereka selama beberapa dekade dan akan terus melakukannya karena penyimpanan lokal bukanlah pengganti "apel untuk apel". Cookie, bagaimanapun, menunjukkan tanda-tanda penuaan. Selain itu, beberapa kekurangan desain mereka juga tidak akan hilang dalam waktu dekat. Yaitu "pencemaran" setiap permintaan di domain dengan cookie payload dan ukuran payload maksimum yang kecil.

Tidak memadai dan tua atau tidak, cookie akan tetap ada, jadi jangan berpikir penyimpanan lokal akan mengambil alih sepenuhnya dalam waktu dekat. Namun, dalam beberapa kasus penggunaan, penyimpanan lokal tidak diragukan lagi merupakan pilihan yang lebih baik.

Jika Anda memiliki (banyak) data untuk disimpan di sisi klien yang jarang ditransfer ke server dan data tersebut tidak mengandung sesuatu yang sensitif – mulailah menggunakan penyimpanan lokal ! Untuk itulah ia diciptakan. Anda akan membuat aplikasi yang lebih cepat dengan membuat semua permintaan HTTP di domain menjadi lebih ringan dan mendapatkan perasaan hangat yang kabur saat menggunakan sesuatu yang baru.