Clipboard dan Storage Patterns
Memakai Clipboard API dan localStorage untuk interaksi kecil yang terasa praktis.
Tujuan belajar
- Memahami kapan Clipboard API berguna
- Menyimpan state kecil dengan localStorage
- Membedakan data UI kecil dari data penting yang perlu backend
Isi lesson
5 blok- 1.API kecil bisa membuat workflow terasa rapiBelum selesaiWajib
- 2.Copy text dan simpan pilihan kecilBelum selesaiWajib
- 3.Jangan simpan data sensitif di localStorageBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
API kecil bisa membuat workflow terasa rapi
WajibTidak semua fitur browser API harus besar. Tombol copy, preferensi tema, tab terakhir, atau draft kecil bisa membuat app terasa lebih nyaman.
Lesson ini fokus pada dua pola: menyalin teks dengan Clipboard API dan menyimpan state kecil dengan localStorage. Keduanya berguna, tetapi harus dipakai dengan batas yang jelas.
Bagian ini memengaruhi progres lesson.
Copy text dan simpan pilihan kecil
Wajibconst shareText = "https://fluentstack.local/lesson/async";
const selectedTheme = "paper";
async function copyShareLink() {
try {
await navigator.clipboard.writeText(shareText);
console.log("Link disalin.");
} catch (error) {
console.log("Browser belum mengizinkan akses clipboard.");
console.error(error);
}
}
localStorage.setItem("preferred-theme", selectedTheme);
const savedTheme = localStorage.getItem("preferred-theme") ?? "dark";Clipboard API bersifat async dan bisa gagal karena izin atau konteks browser. localStorage cocok untuk nilai kecil berbentuk string.
Bagian ini memengaruhi progres lesson.
Peringatan
WajibJangan simpan data sensitif di localStorage
localStorage mudah dibaca oleh JavaScript di halaman yang sama. Jangan simpan token penting, password, data pembayaran, atau informasi sensitif di sana. Untuk module ini, localStorage hanya dipakai untuk state UI kecil.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususCopy text dan simpan state UI
Latihan memakai Clipboard API dan localStorage untuk interaksi kecil.
Tujuan awal: Fokus di tab JS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Clipboard API cocok untuk aksi copy yang eksplisit dari user.
- Akses clipboard bisa gagal, jadi siapkan pesan fallback.
- localStorage menyimpan string di browser user.
- Gunakan localStorage untuk preferensi kecil, bukan data sensitif.
- Berikutnya, kamu akan mengubah data mentah menjadi data yang siap dirender.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: API kecil bisa membuat workflow terasa rapi.