Mengelola Data Lokal dengan localStorage dan sessionStorage

Pendahuluan

Pada artikel sebelumnya, kita telah berhasil mempelajari cara menggunakan Fetch API dan async/await untuk mengambil data pertanyaan kuis secara dinamis dari server. Data yang kita ambil sudah sangat interaktif, namun ada satu masalah mendasar: semua data tersebut akan hilang saat pengguna melakukan refresh halaman atau menutup browser. Bayangkan jika pengguna, misalnya Andi, baru saja meraih skor tertinggi (high score) di aplikasi kuis kita, namun skor tersebut hilang begitu saja saat ia tidak sengaja menutup tab browser. Tentu ini akan membuat pengalaman pengguna menjadi sangat buruk.

Dalam tutorial kali ini, kita akan mempelajari cara memberikan “daya ingat” pada aplikasi kuis kita menggunakan Web Storage API, yaitu localStorage dan sessionStorage. Kita akan belajar bagaimana menyimpan data secara lokal di dalam browser pengguna sehingga data tersebut tetap ada meskipun browser ditutup dan dibuka kembali.

Di akhir artikel ini, kita akan mengimplementasikan fitur High Score dan penyimpanan nama pemain pada Aplikasi Kuis Interaktif yang sedang kita bangun. Dengan begitu, aplikasi kuis kita tidak hanya sekadar menampilkan pertanyaan, tetapi juga memiliki sistem kompetisi yang nyata dengan catatan skor yang persisten.

Mengenal Web Storage API

Web Storage API adalah bagian dari Web API yang memungkinkan kita menyimpan pasangan key-value (kunci dan nilai) dalam bentuk string di dalam browser. Ada dua mekanisme utama yang akan kita gunakan: localStorage dan sessionStorage. Meskipun keduanya memiliki cara penggunaan yang serupa, perbedaan mendasarnya terletak pada masa hidup (lifecycle) datanya.

1. localStorage (Persisten)

localStorage adalah tempat penyimpanan yang sangat tangguh. Data yang disimpan di dalam localStorage tidak akan dihapus meskipun pengguna menutup tab, menutup browser, bahkan mematikan komputer. Data ini akan tetap ada sampai kita menghapusnya secara manual melalui kode JavaScript atau pengguna membersihkan cache browser mereka.

Ini adalah pilihan yang tepat untuk menyimpan data yang sifatnya permanen atau jangka panjang, seperti pengaturan tema (dark mode/light mode), preferensi bahasa, atau dalam kasus proyek kita, nilai high score.

2. sessionStorage (Temporary)

Berbeda dengan localStorage, sessionStorage memiliki masa hidup yang jauh lebih singkat. Data yang disimpan di dalam sessionStorage hanya akan bertahan selama sesi halaman tersebut aktif. Begitu tab atau jendela browser ditutup, maka seluruh data di dalam sessionStorage akan otomatis terhapus.

sessionStorage sangat berguna untuk menyimpan data yang bersifat sementara dan hanya relevan selama pengguna sedang mengerjakan tugas tertentu, misalnya menyimpan status progres kuis agar jika pengguna melakukan refresh (tapi tidak menutup tab), jawaban yang sedang dikerjakan tidak hilang.

Berikut adalah perbandingan singkatnya:

Operasi Dasar pada Web Storage

Mengoperasikan Web Storage sangatlah sederhana. Kita hanya perlu berurusan dengan metode setItem, getItem, removeItem, dan clear. Namun, ada satu hal krusarial yang harus diingat: Web Storage hanya dapat menyimpan data dalam bentuk string.

Jika kita mencoba menyimpan objek JavaScript atau array secara langsung, browser akan mengubahnya menjadi string "[object Object]", yang mana data aslinya akan rusak dan tidak bisa dibaca kembali. Oleh karena itu, kita wajib menggunakan JSON.stringify() saat menyimpan dan JSON.parse() saat mengambil data.

Mari kita lihat contoh implementasi dasarnya:

// --- Contoh Penggunaan localStorage ---

// 1. Menyimpan data (Key, Value)
// Kita akan menyimpan nama pemain, misalnya 'Siti'
localStorage.setItem('playerName', 'Siti');

// 2. Mengambil data
const name = localStorage.melalui('playerName');
console.log(`Halo, ${name}!`); // Output: Halo, Siti!

// 3. Menyimpan Objek (WAJIB menggunakan JSON.stringify)
const userStats = {
    score: 100,
    level: 5,
    isPremium: true
};

// Mengubah objek menjadi string JSON sebelum disimpan
localStorage.setItem('userStats', JSON.stringify(userStats));

// 4. Mengambil Objek (WAJIB menggunakan JSON.parse)
const savedStats = JSON.parse(localStorage.getItem('userStats'));
console.log(`Skor saat ini: ${savedStats.score}`); // Output: Skor saat ini: 100

// 5. Menghapus item tertentu
localStorage.removeItem('playerName');

// 6. Menghapus seluruh isi localStorage
// localStorage.clear();

Implementasi dalam Proyek Aplikasi Kuis

Sekarang, mari kita terapkan konsep ini ke dalam proyek Aplikasi Kuis Interaktif kita. Kita akan membuat dua fitur utama:

1. Menyimpan nama pemain menggunakan sessionStorage (karena nama hanya relevan selama sesi kuis berlangsung).
2. Menyimpan skor tertinggi (high score) menggunakan localStorage (agar skor tetap ada selamanya).

Berikut adalah potongan kode integrasi pada logika akhir kuis kita:

// File: quiz-logic.js

// Fungsi untuk mengakhiri kuis dan menyimpan skor
function endQuiz(finalScore) {
    const playerName = sessionStorage.getItem('currentPlayerName');
    
    // Jika pemain belum memasukkan nama, kita beri default
    const displayName = playerName ? playerName : 'Anonim';

    console.log(`Kuis selesai! Pemain: ${displayName}, Skor: ${finalganScore}`);

    // --- Logika High Score ---
    
    // 1. Ambil high score lama dari localStorage
    // Jika belum ada, set default ke 0
    let highScore = localStorage.getItem('quizHighScore');
    highScore = highScore ? parseInt(highScore) : 0;

    // 2. Cek apakah skor saat ini melampaui high score
    if (finalScore > highScore) {
        console.log("Selamat! Skor baru tercapai!");
        
        // 3. Simpan skor baru ke localStorage
        localStorage.setItem('quizHighScore', finalScore);
        
        // Opsional: Simpan juga nama pemenang high score
        localStorage.setItem('highScorePlayer', displayName);
        
        alert(`Selamat ${displayName}! Skor tertinggi baru: ${finalScore}`);
    } else {
        alert(`Skor Anda: ${finalScore}. High score saat ini: ${highScore}`);
    }

    // Tampilkan hasil akhir di UI
    displayFinalResult(finalScore, highScore);
}

// Fungsi untuk memulai kuis (inisialisasi nama)
function startQuiz(name) {
    // Simpan nama ke sessionStorage agar bisa diakses di seluruh sesi kuis
    sessionStorage.setItem('currentPlayerName', name);
    
    // Lanjutkan logika memulai kuis...
    console.log(`Memulai kuis untuk ${name}...`);
}

// Contoh penggunaan saat aplikasi dimuat
const inputNama = "Reza"; // Anggap ini diambil dari input HTML
startQuiz(inputNama);

// Simulasi skor akhir kuis
const skorAkhir = 85; 
endQuiz(skorAkhir);

Dengan implementasi di atas, jika Reza mendapatkan skor 85 dan itu adalah skor tertinggi, maka meskipun Reza menutup browsernya dan kembali besok, aplikasi akan tetap menampilkan bahwa skor tertinggi adalah 85.

Kesalahan Umum

Saat bekerja dengan Web Storage, ada beberapa jebakan yang sering membuat developer pemula frustrasi. Berikut adalah beberapa di antaranya:

1. Lupa Melakukan JSON.parse()

Ini adalah kesalahan paling umum. Developer berhasil menyimpan objek, tetapi saat mengambilnya kembali, mereka mendapatkan string "[object Object]" dan bukan objek asli.

Salah:

const user = localStorage.getItem('user');
console.log(user.name); // Error: user.name is undefined karena 'user' adalah string

Benar:

const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // Berhasil!

2. Mengambil Data yang Tidak Ada (null)

Jika Anda mencoba mengambil data menggunakan getItem() untuk kunci yang belum pernah dibuat, JavaScript akan mengembalikan null. Jika Anda langsung memproses null tersebut tanpa pengecekan, aplikasi Anda akan crash.

Cara Aman:

const savedScore = localStorage.getItem('highScore');
// Gunakan operator nullish coalescing (??) atau default value
const finalScore = savedScore ? parseInt(savedScore) : 0;

3. Menyimpan Data Terlalu Besar

Meskipun jarang terjadi pada aplikasi sederhana, localStorage memiliki batas kapasitas (biasanya sekitar 5MB-10MB tergantung browser). Jangan gunakan localStorage untuk menyimpan data gambar (Base64) yang sangat besar atau ribuan baris data JSON yang kompleks. Untuk kebutuhan data besar, gunakan IndexedDB.

Kesimpulan

localStorage dan sessionStorage adalah alat yang sangat kuat untuk menyimpan state sederhana secara persisten di sisi klien. Dengan memahami perbedaan antara localStorage (permanen) dan sessionStorage (sementara), serta selalu menggunakan JSON.stringify() saat menyimpan dan JSON.parse() saat mengambil data, Anda dapat membangun aplikasi web yang jauh lebih interaktif dan user-friendly.