LocalStorage JavaScript untuk Menyimpan Data di Browser

Setelah memahami DOM dan JavaScript Event, sekarang kita masuk ke salah satu fitur JavaScript yang sangat berguna untuk project sederhana, yaitu LocalStorage.

LocalStorage memungkinkan kita menyimpan data langsung di browser pengguna.

Data yang disimpan tidak langsung hilang ketika halaman direfresh atau browser ditutup.

Fitur ini cocok digunakan untuk menyimpan data sederhana seperti:

• Nama pengguna.
• Preferensi dark mode.
• Catatan sederhana.
• Daftar tugas.
• Progress belajar.
• Bookmark sederhana.

Dalam artikel ini kita akan mempelajari LocalStorage dari dasar sampai membuat contoh project sederhana.

Apa Itu LocalStorage?

LocalStorage adalah fitur penyimpanan yang tersedia di browser.

Dengan LocalStorage, JavaScript dapat menyimpan data dalam bentuk pasangan key dan value.

Contohnya:

nama = Budi

Pada contoh tersebut:

• nama adalah key.
• Budi adalah value.

Data tersebut akan disimpan oleh browser untuk website yang sedang digunakan.

Apa Kelebihan LocalStorage?

LocalStorage mudah digunakan karena kita tidak memerlukan database atau server untuk menyimpan data sederhana.

Beberapa kelebihannya adalah:

• Mudah digunakan dengan JavaScript.
• Data tetap tersedia setelah halaman direfresh.
• Data tersimpan di browser pengguna.
• Cocok untuk project JavaScript pemula.
• Tidak membutuhkan database untuk data sederhana.

Namun, LocalStorage bukan pengganti database untuk semua kebutuhan.

LocalStorage lebih cocok digunakan untuk data sederhana yang memang boleh disimpan di perangkat pengguna.

Cara Menyimpan Data dengan localStorage.setItem()

Untuk menyimpan data, kita menggunakan:

localStorage.setItem();

Struktur dasarnya:

localStorage.setItem("key", "value");

Contoh:

localStorage.setItem("nama", "Budi");

Kode tersebut menyimpan data dengan:

key: nama
value: Budi

Setelah disimpan, coba refresh halaman.

Data tersebut masih tetap tersimpan di browser.

Cara Membaca Data dengan localStorage.getItem()

Untuk mengambil data yang sudah disimpan, gunakan:

localStorage.getItem();

Contoh:

const nama = localStorage.getItem("nama");

console.log(nama);

Jika sebelumnya kita menyimpan:

localStorage.setItem("nama", "Budi");

Maka hasilnya:

Budi

Apa yang Terjadi Jika Data Tidak Ada?

Jika key yang dicari tidak tersedia, getItem() akan menghasilkan nilai:

null

Contoh:

const kota = localStorage.getItem("kota");

console.log(kota);

Jika key kota belum pernah disimpan, hasilnya adalah null.

Kita dapat memeriksanya menggunakan kondisi:

const nama = localStorage.getItem("nama");

if (nama !== null) {
    console.log("Nama ditemukan:", nama);
}

Cara Menghapus Data dengan removeItem()

Jika ingin menghapus satu data tertentu dari LocalStorage, gunakan:

localStorage.removeItem();

Contoh:

localStorage.removeItem("nama");

Data dengan key nama akan dihapus.

Menghapus Semua Data LocalStorage

Untuk menghapus seluruh data LocalStorage milik website tersebut, gunakan:

localStorage.clear();

Contoh:

localStorage.clear();

Gunakan clear() dengan hati-hati karena semua data LocalStorage pada origin tersebut akan dihapus sekaligus.

LocalStorage Hanya Menyimpan String

Hal penting yang perlu dipahami adalah LocalStorage menyimpan value dalam bentuk string.

Contohnya:

localStorage.setItem("umur", 20);

Ketika diambil kembali:

const umur = localStorage.getItem("umur");

console.log(typeof umur);

Hasilnya:

string

Walaupun kita memasukkan angka 20, data yang dibaca dari LocalStorage menjadi string.

Menyimpan Data dari Input

Sekarang kita gabungkan LocalStorage dengan DOM dan Event.

Buat HTML:

<input type="text" id="nama" placeholder="Masukkan nama">

<button id="simpan">Simpan</button>

Kemudian JavaScript:

const nama = document.getElementById("nama");
const tombolSimpan = document.getElementById("simpan");

tombolSimpan.addEventListener("click", function () {
    localStorage.setItem("nama", nama.value);
});

Ketika tombol diklik, nilai dari input akan disimpan ke LocalStorage.

Menampilkan Data yang Sudah Disimpan

Kita dapat mengambil data tersebut ketika halaman dibuka.

HTML:

<input type="text" id="nama" placeholder="Masukkan nama">

<button id="simpan">Simpan</button>

<p id="hasil"></p>

JavaScript:

const nama = document.getElementById("nama");
const tombolSimpan = document.getElementById("simpan");
const hasil = document.getElementById("hasil");

const namaTersimpan = localStorage.getItem("nama");

if (namaTersimpan !== null) {
    hasil.textContent = "Halo, " + namaTersimpan;
}

tombolSimpan.addEventListener("click", function () {
    localStorage.setItem("nama", nama.value);

    hasil.textContent = "Halo, " + nama.value;
});

Sekarang data tetap dapat ditampilkan walaupun halaman direfresh.

Contoh Project: Simpan Nama Pengguna

Kita akan membuat project kecil yang memiliki fitur:

• Memasukkan nama.
• Menyimpan nama.
• Menampilkan nama setelah halaman direfresh.
• Menghapus nama yang tersimpan.

Buat file HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Belajar LocalStorage</title>
</head>

<body>

    <h1>Belajar LocalStorage JavaScript</h1>

    <input
        type="text"
        id="nama"
        placeholder="Masukkan nama"
    >

    <button id="simpan">Simpan Nama</button>
    <button id="hapus">Hapus Nama</button>

    <p id="hasil"></p>

    <script src="script.js"></script>

</body>
</html>

Kemudian buat file script.js:

const inputNama = document.getElementById("nama");
const tombolSimpan = document.getElementById("simpan");
const tombolHapus = document.getElementById("hapus");
const hasil = document.getElementById("hasil");

const namaTersimpan = localStorage.getItem("nama");

if (namaTersimpan !== null) {
    hasil.textContent = "Selamat datang kembali, " + namaTersimpan + "!";
}

tombolSimpan.addEventListener("click", function () {
    const nama = inputNama.value.trim();

    if (nama === "") {
        hasil.textContent = "Silakan masukkan nama.";
        return;
    }

    localStorage.setItem("nama", nama);

    hasil.textContent = "Nama berhasil disimpan: " + nama;

    inputNama.value = "";
});

tombolHapus.addEventListener("click", function () {
    localStorage.removeItem("nama");

    hasil.textContent = "Nama berhasil dihapus.";
});

Bagaimana Project Tersebut Bekerja?

Pertama kita mengambil data yang mungkin sudah tersimpan:

const namaTersimpan = localStorage.getItem("nama");

Jika data ditemukan, kita menampilkannya:

if (namaTersimpan !== null) {
    hasil.textContent = "Selamat datang kembali, " + namaTersimpan + "!";
}

Ketika tombol Simpan diklik, nilai input disimpan:

localStorage.setItem("nama", nama);

Ketika tombol Hapus diklik, data dihapus:

localStorage.removeItem("nama");

Sekarang coba masukkan nama, simpan, kemudian refresh halaman.

Nama yang tersimpan akan tetap tersedia.

Menyimpan Array di LocalStorage

LocalStorage tidak dapat menyimpan array secara langsung dalam bentuk aslinya.

Untuk menyimpan array atau object, kita dapat menggunakan JSON.stringify().

Contoh array:

const daftarBelajar = [
    "HTML",
    "CSS",
    "JavaScript"
];

localStorage.setItem(
    "daftarBelajar",
    JSON.stringify(daftarBelajar)
);

JSON.stringify() mengubah array menjadi string sehingga dapat disimpan di LocalStorage.

Mengambil Array dari LocalStorage

Setelah mengambil data, kita menggunakan JSON.parse() untuk mengubahnya kembali menjadi array.

const data = localStorage.getItem("daftarBelajar");

const daftarBelajar = JSON.parse(data);

console.log(daftarBelajar);

Hasilnya kembali menjadi array JavaScript.

Menyimpan Object di LocalStorage

Cara yang sama juga dapat digunakan untuk object.

Contoh:

const user = {
    nama: "Budi",
    level: "Pemula",
    belajar: "JavaScript"
};

localStorage.setItem(
    "user",
    JSON.stringify(user)
);

Untuk mengambilnya:

const dataUser = localStorage.getItem("user");

const user = JSON.parse(dataUser);

console.log(user.nama);

JSON.stringify() dan JSON.parse()

Dua method ini sangat penting ketika bekerja dengan LocalStorage.

JSON.stringify() digunakan untuk mengubah array atau object menjadi string.

const data = {
    nama: "Andi"
};

const hasil = JSON.stringify(data);

Sedangkan JSON.parse() melakukan proses sebaliknya.

const objectData = JSON.parse(hasil);

Secara sederhana:

Object / Array
↓
JSON.stringify()
↓
String
↓
LocalStorage

Ketika mengambil data:

LocalStorage
↓
String
↓
JSON.parse()
↓
Object / Array

Memberikan Nilai Default

Ketika sebuah data belum tersedia, kita dapat memberikan nilai awal.

Contohnya:

const nama = localStorage.getItem("nama") || "Pengunjung";

console.log(nama);

Jika data nama belum tersedia, variabel akan menggunakan nilai Pengunjung.

Untuk array, kita dapat menggunakan:

const data = JSON.parse(
    localStorage.getItem("daftarBelajar")
) || [];

Jika belum ada data, variabel akan berisi array kosong.

Contoh LocalStorage untuk Dark Mode

Salah satu penggunaan LocalStorage yang umum adalah menyimpan pilihan tema pengguna.

Misalnya HTML:

<button id="tema">Ubah Tema</button>

CSS:

.dark {
    background-color: #111;
    color: white;
}

JavaScript:

const tombolTema = document.getElementById("tema");

const temaTersimpan = localStorage.getItem("tema");

if (temaTersimpan === "dark") {
    document.body.classList.add("dark");
}

tombolTema.addEventListener("click", function () {
    document.body.classList.toggle("dark");

    if (document.body.classList.contains("dark")) {
        localStorage.setItem("tema", "dark");
    } else {
        localStorage.setItem("tema", "light");
    }
});

Jika pengguna memilih dark mode, pilihan tersebut dapat tetap digunakan setelah halaman direfresh.

Melihat LocalStorage di Browser

Kita juga dapat melihat data LocalStorage melalui Developer Tools browser.

Pada browser berbasis Chromium seperti Chrome, langkah umumnya adalah:

1. Buka website.
2. Buka Developer Tools.
3. Pilih tab Application.
4. Cari bagian Storage.
5. Pilih Local Storage.
6. Pilih alamat website.

Di sana kita dapat melihat key dan value yang tersimpan.

LocalStorage dan sessionStorage

Selain LocalStorage, browser juga menyediakan sessionStorage.

Cara penggunaannya hampir sama.

LocalStorage:

localStorage.setItem("nama", "Budi");

SessionStorage:

sessionStorage.setItem("nama", "Budi");

Perbedaannya terletak pada masa penyimpanan data.

Data LocalStorage dapat bertahan setelah browser ditutup, sampai data tersebut dihapus.

Sementara sessionStorage digunakan untuk penyimpanan yang terkait dengan sesi tab browser.

Apakah LocalStorage Aman untuk Password?

Jangan menyimpan password, token rahasia, data kartu pembayaran, atau informasi sensitif di LocalStorage hanya karena cara penggunaannya mudah.

Data LocalStorage dapat diakses oleh JavaScript yang berjalan pada origin website tersebut.

Gunakan LocalStorage untuk data yang memang sesuai disimpan di sisi browser dan bukan sebagai tempat menyimpan rahasia pengguna.

Kapan Sebaiknya Menggunakan LocalStorage?

LocalStorage cocok digunakan untuk data sederhana seperti:

• Preferensi tampilan.
• Tema website.
• Progress sederhana.
• Draft lokal.
• Daftar item sederhana.
• Bookmark lokal.

Untuk aplikasi yang membutuhkan akun pengguna, sinkronisasi antarperangkat, keamanan lebih tinggi, atau data penting, biasanya diperlukan penyimpanan di server dan database.

Kesalahan Umum Saat Belajar LocalStorage

1. Menganggap LocalStorage Bisa Menyimpan Object Langsung

Contoh yang sebaiknya dihindari:

const user = {
    nama: "Budi"
};

localStorage.setItem("user", user);

Gunakan:

localStorage.setItem(
    "user",
    JSON.stringify(user)
);

2. Lupa Menggunakan JSON.parse()

Ketika mengambil object atau array yang sebelumnya disimpan dengan JSON.stringify(), ubah kembali menggunakan:

JSON.parse();

3. Salah Menulis Key

Misalnya menyimpan:

localStorage.setItem("namaUser", "Budi");

Tetapi mengambil:

localStorage.getItem("nama");

Data tidak akan ditemukan karena key yang digunakan berbeda.

4. Tidak Memeriksa Data Kosong

Ketika mengambil data yang belum tersedia, hasilnya dapat berupa null.

Karena itu, lakukan pengecekan sebelum memproses data jika diperlukan.

Method LocalStorage yang Perlu Diketahui

Untuk pemula, empat method utama yang perlu dipahami adalah:

• localStorage.setItem() — menyimpan data.
• localStorage.getItem() — mengambil data.
• localStorage.removeItem() — menghapus satu data.
• localStorage.clear() — menghapus seluruh data LocalStorage untuk origin tersebut.

Untuk array dan object, tambahkan:

• JSON.stringify() — mengubah data menjadi string.
• JSON.parse() — mengubah string JSON kembali menjadi data JavaScript.

Latihan LocalStorage untuk Pemula

Coba buat project kecil tanpa melihat contoh secara langsung.

Buat halaman dengan:

1. Input nama.
2. Tombol Simpan.
3. Tombol Hapus.
4. Area untuk menampilkan nama.

Ketika nama disimpan, masukkan ke LocalStorage.

Ketika halaman direfresh, nama harus tetap tampil.

Ketika tombol Hapus ditekan, data harus hilang dari LocalStorage.

Jika sudah berhasil membuat latihan tersebut, coba tingkatkan menjadi daftar tugas sederhana menggunakan array dan JSON.

Kesimpulan

LocalStorage merupakan fitur browser yang memungkinkan JavaScript menyimpan data sederhana di perangkat pengguna.

Empat operasi dasar LocalStorage adalah:

localStorage.setItem();
localStorage.getItem();
localStorage.removeItem();
localStorage.clear();

Untuk menyimpan array atau object, gunakan JSON.stringify() ketika menyimpan dan JSON.parse() ketika mengambil data.

Dengan memahami LocalStorage, kita sudah dapat membuat fitur sederhana yang tetap mempertahankan data walaupun halaman direfresh.

Setelah menyelesaikan dasar HTML, CSS, JavaScript, DOM, Event, dan LocalStorage, kita akan berpindah ke materi berikutnya yaitu Hosting dan Domain. Materi tersebut akan membahas bagaimana sebuah website dapat tersedia dan diakses melalui internet.