JavaScript - API Penyimpanan: Panduan untuk Pemula

Hey there, bakal superstars coding! ? Hari ini, kita akan melihat dunia API Penyimpanan JavaScript. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda dalam perjalanan yang menarik ini. Mari kita mulai!

Apa Itu Web Storage API?

Bayangkan Anda memiliki buku catatan magis yang dapat mengingat hal-hal untuk Anda, bahkan setelah Anda menutupnya. Itu sebenarnya apa yang dilakukan Web Storage API untuk website! Ini adalah cara untuk aplikasi web menyimpan data secara langsung di browser Anda.

Pikirkan seperti ini: Anda sedang bermain game di sebuah website, dan Anda ingin menyimpan kemajuan Anda. Web Storage API memungkinkan game untuk mengingat 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 dari ini secara detil.

Objek Window localStorage

Apa Itu localStorage?

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

Cara Menggunakan localStorage

Berikut 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");

// Membersihkan semua data
localStorage.clear();

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

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

Menggunakan 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");

// Membersihkan semua data
sessionStorage.clear();

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

Cookie vs localStorage vs sessionStorage

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

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 menjaga itu untuk waktu yang lama.
3. sessionStorage adalah seperti papan putih. Itu menahan informasi secara sementara dan dihapus saat Anda selesai.

Berikut adalah tabel perbandingan praktis:

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

Properti dan Metode Objek Penyimpanan

localStorage dan sessionStorage memiliki 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 terkait dengan key yang diberikan.
3. removeItem(key): Menghapus item 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 saja! Anda telah mengambil langkah pertama Anda ke dunia penyimpanan web. Ingat, latihan membuat sempurna. Cobalah membuat halaman web sederhana dan eksperimen dengan metode penyimpanan ini. Mungkin buat game kecil yang mengingat skor pemain menggunakan localStorage?

Sebelum saya akhir, ini adalah一个小小的编程笑话 untuk Anda:

Mengapa para pemrogram 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