JavaScript - Storage API: Panduan Pemula

Hey there, bakat pemrograman masa depan! ? Hari ini, kita akan melihat dunia API Storage JavaScript. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya - saya akan menjadi panduan ramah Anda dalam perjalanan yang menarik ini. Mari kita mulai!

Apa Itu Web Storage API?

Imaginilah Anda memiliki buku catatan ajaib yang bisa ingat hal-hal untuk Anda, bahkan setelah Anda menutupnya. Itu sebenarnya apa yang dilakukan Web Storage API bagi website! Itu adalah cara untuk aplikasi web menyimpan data secara langsung di browser Anda.

Pikirkan seperti ini: Anda sedang bermain permainan di sebuah website, dan Anda ingin menyimpan kemajuan Anda. Web Storage API memungkinkan permainan itu untuk ingat skor Anda, bahkan jika Anda menutup browser dan kembali kemudian. Keren, kan?

Ada dua jenis penyimpanan web utama:

1. localStorage
2. sessionStorage

Mari kita jelajahi masing-masing ini secara detil.

Objek Window localStorage

Apa Itu localStorage?

localStorage adalah seperti lemari penyimpanan tetap bagi aplikasi web Anda. Itu menyimpan data bahkan setelah Anda menutup browser, membuatnya sempurna untuk penyimpanan jangka panjang.

Cara Menggunakan localStorage

Ini adalah contoh sederhana tentang cara menggunakan localStorage:

// Menyimpan data
localStorage.setItem("username", "CoolCoder123");

// Mengambil data
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // Output: CoolCoder123

// Menghapus data
localStorage.removeItem("username");

// Menghapus semua data
localStorage.clear();

Dalam contoh ini, kita menyimpan username, mengambilnya, menghapusnya, dan kemudian menghapus semua data. Itu seperti menulis di buku catatan ajaib, membaca apa yang Anda tulis, menghapus catatan tertentu, dan kemudian menghapus seluruh buku catatan!

Objek Window sessionStorage

Apa Itu sessionStorage?

sessionStorage adalah seperti saudara lupa localStorage. Itu menyimpan data hanya untuk satu sesi saja. Ketika Anda menutup tab browser, poof! Data hilang.

Cara Menggunakan sessionStorage

Penggunaan sessionStorage sangat mirip dengan localStorage:

// Menyimpan data
sessionStorage.setItem("tempScore", "1000");

// Mengambil data
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // Output: 1000

// Menghapus data
sessionStorage.removeItem("tempScore");

// Menghapus semua data
sessionStorage.clear();

Ini sangat cocok untuk menyimpan informasi sementara, seperti skor permainan yang Anda hanya butuhkan saat pemain sedang bermain.

Cookie vs localStorage vs sessionStorage

Sekarang, mari kita bandingkan metode penyimpanan ini menggunakan analogi yang menyenangkan:

1. Cookies adalah seperti catatan sticky. Mereka kecil, dapat dibaca oleh server, dan memiliki tanggal kadaluarsa.
2. localStorage adalah seperti buku harian pribadi. Itu menyimpan banyak informasi dan menyimpannya untuk waktu yang lama.
3. sessionStorage adalah seperti papan putih. Itu menyimpan informasi secara sementara dan dihapus saat Anda selesai.

Berikut adalah tabel perbandingan praktis:

Fitur	Cookies	localStorage	sessionStorage
Kapasitas	~4KB	~5MB	~5MB
Kadaluarsa	Secara manual	Tak pernah	Saat tab ditutup
Akses Server	Ya	Tidak	Tidak
Dikirim dengan Request	Ya	Tidak	Tidak

Properti dan Metode Objek Penyimpanan

localStorage dan sessionStorage membagi properti dan metode yang sama. Mari kita jelajahi mereka:

Properti

1. length: Mengembalikan jumlah item yang disimpan.

console.log(localStorage.length);

Metode

1. setItem(key, value): Menambahkan pasangan key/value ke penyimpanan.
2. getItem(key): Mengambil nilai yang terkait dengan key yang diberikan.
3. removeItem(key): Menghapus item yang terkait dengan key yang diberikan.
4. clear(): Menghapus semua item dari penyimpanan.
5. key(index): Mengembalikan nama key pada indeks yang ditentukan.

Berikut adalah contoh penggunaan semua metode ini:

// Menggunakan setItem
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");

// Menggunakan getItem
console.log(localStorage.getItem("fruit")); // Output: apple

// Menggunakan key
console.log(localStorage.key(0)); // Output: fruit (atau carrot, urutan tidak dijamin)

// Menggunakan length
console.log(localStorage.length); // Output: 2

// Menggunakan removeItem
localStorage.removeItem("vegetable");

// Menggunakan clear
localStorage.clear();

Dan itu adalah! Anda telah mengambil langkah pertama ke dalam dunia penyimpanan web. Ingat, latihan membuat sempurna. Cobalah membuat halaman web sederhana dan eksperimen dengan metode penyimpanan ini. Mungkin buat permainan kecil yang mengingat skor pemain menggunakan localStorage?

Sebelum saya tinggal, ini adalah sedikit permainan kode untuk Anda:

Mengapa para pemrogrammer memilih mode gelap? Karena cahaya menarik nyamuk! ??

Selamat coding, dan ingat - setiap ahli pernah menjadi pemula. Terus belajar, terus coding, dan terutama, bersenang-senang!

Credits: Image by storyset