HTML - Web Storage: Portal ke Penyimpanan Data Di Pihak Klien

Hai teman-teman, pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia HTML Web Storage. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk memandu Anda melalui aspek penting ini dari pengembangan web modern. Jadi, ambil minumannya yang favorit, duduk nyaman, dan mari kita masuk ke dalam!

HTML - Web Storage

Apa Itu Web Storage?

Sebelum kita masuk ke detailnya, mari kita mengerti apa itu Web Storage. Bayangkan Anda sedang membangun pondok pohon dan butuh tempat untuk menyimpan alat Anda. Web Storage seperti kompartemen rahasia di pondok pohon Anda tempat Anda dapat menyimpan informasi penting untuk digunakan kemudian. Dalam istilah pengembangan web, itu adalah cara untuk menyimpan data di pihak klien (yaitu browser pengguna) tanpa perlu mengandalkan cookie.

Jenis Web Storage

Sekarang, mari kita jelajahi dua jenis utama Web Storage:

Session Storage
Local Storage

Pertimbangkan ini sebagai dua lemari berbeda di kompartemen rahasia pondok pohon Anda. Mereka melayani tujuan yang sama tetapi memiliki beberapa perbedaan penting. Mari kitauraikan:

Session Storage

Session Storage seperti buku catatan sementara. Itu menyimpan data untuk satu sesi, dan sekali Anda menutup tab atau jendela browser Anda, poof! Data itu hilang seperti magi.

Local Storage

Local Storage, dari sisi lain, seperti buku harian. Informasi yang Anda tulis disini tetap ada bahkan setelah Anda menutup browser Anda. Itu ada menunggu Anda saat Anda kembali, seperti buku harian tepercaya di meja tidur Anda.

Contoh Web Storage HTML

Mari kita kerjakan tangan dan mencoba beberapa kode! Kita akan mulai dengan Session Storage dan kemudian pindah ke Local Storage.

Contoh Session Storage

<!DOCTYPE html>
<html>
<head>
<title>Session Storage Fun</title>
</head>
<body>
<h1>Selamat Datang di Party Session Storage!</h1>
<button onclick="saveData()">Simpan Nama Saya</button>
<button onclick="loadData()">Nama Saya Adalah apa?</button>

<script>
function saveData() {
sessionStorage.setItem("userName", "Alice");
alert("Nama disimpan!");
}

function loadData() {
var name = sessionStorage.getItem("userName");
if (name) {
alert("Nama Anda adalah " + name);
} else {
alert("Saya belum tahu namanya!");
}
}
</script>
</body>
</html>

mariuraikan ini:

Kita memiliki dua tombol: satu untuk menyimpan data dan satu untuk memuat data.
Fungsi saveData() menggunakan sessionStorage.setItem() untuk menyimpan nama "Alice".
Fungsi loadData() menggunakan sessionStorage.getItem() untuk mengambil nama yang disimpan.
Jika Anda menutup tab dan membukanya kembali, nama akan hilang. Itu Session Storage untuk Anda!

Contoh Local Storage

Sekarang, mari kita ubah contoh kita untuk menggunakan Local Storage:

<!DOCTYPE html>
<html>
<head>
<title>Adventure Local Storage</title>
</head>
<body>
<h1>Selamat Datang di Kerajaan Local Storage!</h1>
<button onclick="saveData()">Ingat Warna Favorit Saya</button>
<button onclick="loadData()">Warna Favorit Saya Adalah apa?</button>

<script>
function saveData() {
localStorage.setItem("favoriteColor", "Blue");
alert("Warna disimpan!");
}

function loadData() {
var color = localStorage.getItem("favoriteColor");
if (color) {
alert("Warna favorit Anda adalah " + color);
} else {
alert("Anda belum memberitahu warna favorit Anda!");
}
}
</script>
</body>
</html>

Strukturnya mirip, tetapi perhatikan bahwa kita menggunakan localStorage bukannya sessionStorage. Perbedaan utama? Tutup browser Anda,ambil coffee break, kembali, dan warna favorit Anda masih ada!

Hapus Web Storage

Sekarang, bagaimana jika Anda ingin membersihkan penyimpanan Anda? Itu seperti pembersihan musim semi untuk aplikasi web Anda! Berikut cara Anda dapat melakukannya:

// Hapus item tertentu
sessionStorage.removeItem("userName");
localStorage.removeItem("favoriteColor");

// Bersihkan semua item
sessionStorage.clear();
localStorage.clear();

Metode Web Storage

Mari kita ringkasan metode yang kita pelajari dalam tabel rapi:

Metode	Deskripsi
setItem(key, value)	Menambahkan pasangan key/value ke penyimpanan
getItem(key)	Mengambil nilai berdasarkan key
removeItem(key)	Menghapus item berdasarkan key
clear()	Menghapus semua item dari penyimpanan

Alasan untuk Memilih Web Storage daripada Cookie

Sekarang, Anda mungkin berpikir, " Mengapa memusingkan diri dengan Web Storage saat kita memiliki cookie?" Pertanyaan yang bagus! Biarkan saya memberikan Anda beberapa alasan yang kuat:

Kapasitas: Web Storage dapat menahan banyak data daripada cookie. Itu seperti upgrading dari kotak kecil ke lemari yang luas!
Keamanan: Data Web Storage tidak dikirimkan dengan setiap permintaan HTTP, seperti cookie. Itu seperti menyimpan buku harian Anda di rumah daripada membawa itu kemana-mana.
Kemudahan Penggunaan: Web Storage memiliki API yang sederhana dan intuitif. Itu seperti menggunakan smartphone modern daripada telepon giliran tua.
Kinerja: Menyimpan data secara lokal dapat membuat aplikasi web Anda lebih cepat. Itu seperti memiliki lemari suplai di kelas daripada berlari ke ruang simpan setiap kali Anda memerlukan sesuatu.

Kesimpulan

Dan di sana Anda punya nya, teman-teman! Kita telah berpergian melalui negeri HTML Web Storage, dari realm sementara Session Storage ke kerajaan abadi Local Storage. Kita telah belajar bagaimana menyimpan, mengambil, dan menghapus data, dan mengapa Web Storage seringkali pilihan yang lebih baik daripada cookie.

Ingat, seperti semua alat yang kuat, gunakan Web Storage bijaksana. Jangan menyimpan informasi sensitif seperti kata sandi atau nomor kartu kredit. Itu untuk meningkatkan pengalaman pengguna, bukan untuk menjaga Fort Knox!

Saat Anda terus melanjutkan perjalanan pengembangan web Anda, Anda akan menemukan banyak cara kreatif untuk menggunakan Web Storage. Mungkin Anda akan gunakan itu untuk mengingat preferensi pengguna, menyimpan kemajuan permainan, atau menyimpan data offline. Kesempatan itu tak terbatas seperti imajinasi Anda!

Jadi, majulah, eksperimen, dan moga aplikasi web Anda selalu ramah pengguna dan performant. Selamat coding, para ahli web masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - WebSocket

Tutorial Seterusnya:

HTML - Events Server Sent