Sepanjang karier penjelajahan web Anda, saya yakin Anda pernah menemukan gagasan tentang cookie, potongan teks yang disimpan oleh browser untuk diambil dan digunakan di kemudian hari. Hal ini bervariasi dari sekedar mengingat nama Anda untuk menyambut Anda secara pribadi saat Anda berkunjung lagi, hingga penyimpanan otentikasi dan isi keranjang belanja yang lebih rumit.
Cookies pada umumnya bekerja dengan baik namun penerapannya mungkin rumit, karena cookie diatur untuk dihapus secara default setelah browser ditutup. Jika pemilik situs web memerlukan data untuk disimpan dalam jangka waktu yang lebih lama, cookie dapat diberikan tanggal kedaluwarsa. Sekali lagi ini tidak sejelas mungkin: seberapa jauh Anda menetapkan tanggalnya, misalnya? Dan apa yang terjadi jika pengguna menghapus cookie mereka?
HTML5 mencoba untuk membersihkannya dengan diperkenalkannya penyimpanan web.
Penyimpanan Web
Penyimpanan web hadir dalam dua jenis berbeda, sessionStorage Dan localStorage. Seperti yang dapat disimpulkan dari namanya,
sessionStorage adalah untuk menyimpan data yang diperlukan untuk sesi tertentu saja, dan localStorage adalah untuk data yang tetap ada tanpa batas waktu.
Penyimpanan web dengan benar memisahkan data sesi dari data jangka panjang
Hal ini menghilangkan kebutuhan akan tanggal kedaluwarsa, dan secara instan memperjelas data mana yang digunakan untuk kapan dan untuk berapa lama. Ini juga membuatnya sangat mudah untuk diterapkan.
APInya
Karena kedua tipe ini sangat mirip, keduanya berbagi API yang sama, yang berisi item dan fungsi berikut:
// The number of items being stored. long length; // To retrieve the item 'key' from storage. getItem(key); // To set the item 'key' in storage with 'value'
setItem(key, value); // To remove the item from storage. removeItem(key); // To clear the entire storage. clear();Semuanya cukup sederhana dan mudah digunakan.
Mengatakan Halo
Katakanlah Anda ingin menyimpan nama pengguna untuk menyambut mereka kembali nanti. Dengan asumsi adanya halaman HTML5 sederhana yang terdiri dari satu kolom input yang disebut name dan tautan yang memanggil fungsi tersebut saveName() itu akan didefinisikan sebagai berikut:
function saveName() { var name = document.getElementById('name').value; localStorage.setItem('username', name); }Setiap kali halaman ini dimuat, panggil fungsi baru sayHello() yang didefinisikan sebagai:
function sayHello() { var userName = localStorage.getItem('username'); if (userName != null) alert("Hello " + userName + " and welcome back!"); }Ini akan memeriksa keberadaan nama pengguna di localStorage, dan jika ada, akan menyambut pengguna.
Perhatikan itu localStorage digunakan di sini daripada sessionStorage karena kami ingin nama tersebut ditampilkan saat pengguna mengunjungi halaman itu lagi, selama waktu tersebut mereka mungkin telah menutup browser, yang akan menghapus apa pun di halaman tersebut. sessionStorage.
Anda dapat melihat ini berhasil dalam contoh “mengucapkan halo” yang sangat sederhana ini. Masukkan nama, klik 'simpan', dan muat ulang halaman.
Jika Anda memasukkan nama lain di kolom input dan mengklik 'simpan', nilai yang ada akan ditimpa. Kami juga dapat menghapus item tersebut dengan menelepon localStorage.removeItem('name'); yang hanya akan menghapus item itu. Seluruhnya localStorage dapat diselesaikan dengan menelepon localStorage.clear();
Penyimpanan sesi
sessionStorage bekerja dengan cara yang persis sama, hanya saja data akan dihapus secara otomatis setelah browser ditutup.
Anda juga dapat menyimpan beberapa item data di penyimpanan web yang terhubung ke satu kunci, namun Anda harus menggunakan a Objek JavaScript dan sesuatu seperti JSON yang membantu "merangkai" data yang disimpan, sehingga memfasilitasinya penyimpanan.
Dukungan Peramban
Jika Anda terbiasa membaca tentang ketidakmampuan Internet Explorer saat ini untuk mendukung fitur HTML5 apa pun, Anda akan terkejut di sini. Penyimpanan web sebenarnya didukung oleh IE8 dan juga semua browser utama:
- Firefox 3.5+
- Safari 4.0+
- Chrome 4.0+
- Opera 10.5+
- Internet Explorer 8.0+
- iPhone 2.0+
- Android 2.0+
Jadi pada dasarnya, Anda bisa mulai menggunakannya sekarang!
