> For the complete documentation index, see [llms.txt](https://alvan.kitakale.id/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alvan.kitakale.id/locastorage-pada-javascript/kenalan-dulu-sama-localstorage.md).
# Kenalan Dulu Sama localStorage
### 🔷 Apa itu localStorage?
`localStorage` adalah:
> **tempat penyimpanan data sederhana di browser yang bisa digunakan oleh JavaScript**
Data yang disimpan di `localStorage` **tidak langsung hilang saat halaman di-refresh**.
#### Kalau tanpa localStorage:
* Data hanya tersimpan sementara
* Refresh halaman → data bisa hilang
* Tutup browser → data dari variabel hilang
* Kita harus mengisi data lagi
#### Kalau pakai localStorage:
* Data bisa disimpan di browser
* Refresh halaman → data masih ada
* Bisa mengambil data kapan saja
* Cocok untuk data sederhana
Contohnya:
* Nama pengguna
* Tema dark/light
* Isi keranjang sederhana
* Progress belajar
* Catatan kecil
***
## 🔷 Cara Menyimpan Data
Untuk menyimpan data kita menggunakan:
```
localStorage.setItem()
```
Contoh:
```
localStorage.setItem("nama", "Andi");
```
Artinya:
> Simpan data dengan nama **"nama"** dan isi **"Andi"**
Bentuk sederhananya:
```
localStorage.setItem("key", "value");
```
* `key` = nama data
* `value` = isi data
***
## 🔷 Cara Mengambil Data
Data yang sudah disimpan bisa kita ambil kembali menggunakan:
```
localStorage.getItem()
```
Contoh:
```
let nama = localStorage.getItem("nama");
console.log(nama);
```
Output:
```
Andi
```
Jadi alurnya:
```
Simpan Data
↓
localStorage
↓
Ambil Data
↓
Gunakan di JavaScript
```
***
## 🔷 Coba Perhatikan
Kita simpan data:
```
localStorage.setItem("sekolah", "SMK Khaidir Nur");
```
Lalu kita ambil:
```
let sekolah = localStorage.getItem("sekolah");
console.log(sekolah);
```
Output:
```
SMK Khaidir Nur
```
Kalau halaman di-refresh?
> **Datanya masih ada.**
Inilah salah satu fungsi utama `localStorage`.
***
## 🔷 Cara Mengubah Data
Tidak ada perintah khusus untuk mengubah data.
Cukup gunakan `setItem()` lagi dengan **key yang sama**.
Awalnya:
```
localStorage.setItem("nama", "Andi");
```
Kemudian:
```
localStorage.setItem("nama", "Budi");
```
Sekarang isi `nama` menjadi:
```
Budi
```
Data sebelumnya akan diganti.
***
## 🔷 Cara Menghapus Data
Kalau kita ingin menghapus satu data:
```
localStorage.removeItem("nama");
```
Misalnya:
```
localStorage.setItem("nama", "Andi");
localStorage.removeItem("nama");
```
Sekarang data `nama` sudah tidak ada.
***
## 🔷 Menghapus Semua Data
Kalau ingin menghapus seluruh data `localStorage`:
```
localStorage.clear();
```
Hati-hati.
Karena:
> `clear()` akan menghapus **semua data localStorage dari website tersebut.**
***
## 🔷 Ada Hal Penting
`localStorage` pada dasarnya menyimpan data sebagai **teks / string**.
Contoh:
```
localStorage.setItem("umur", 17);
```
Ketika kita ambil:
```
let umur = localStorage.getItem("umur");
```
Nilainya akan terbaca sebagai:
```
"17"
```
Bukan langsung sebagai Number.
Kalau mau dijadikan angka:
```
let umur = Number(localStorage.getItem("umur"));
```
***
## 🔷 Bagaimana Kalau Array?
Misalnya kita punya:
```
let buah = ["Apel", "Jeruk", "Mangga"];
```
Kita **tidak langsung** menyimpan array seperti biasa.
Gunakan:
```
JSON.stringify()
```
Contoh:
```
let buah = ["Apel", "Jeruk", "Mangga"];
localStorage.setItem("buah", JSON.stringify(buah));
```
Untuk mengambilnya kembali:
```
let buah = JSON.parse(
localStorage.getItem("buah")
);
console.log(buah);
```
Hasilnya kembali menjadi array.
***
## 🔷 Ingat Dua Ini
Saat menyimpan Array / Object:
```
JSON.stringify()
```
Artinya:
> Ubah data menjadi teks agar bisa disimpan.
Saat mengambil:
```
JSON.parse()
```
Artinya:
> Ubah teks kembali menjadi Array / Object.
Sederhananya:
```
Array / Object
↓
JSON.stringify()
↓
localStorage
↓
JSON.parse()
↓
Array / Object lagi
```
***
## 🔷 Studi Kasus Sederhana
Kita ingin menyimpan nama siswa.
HTML:
```
```
JavaScript:
```
let inputNama = document.getElementById("nama");
let tombol = document.getElementById("simpan");
tombol.addEventListener("click", function () {
localStorage.setItem("nama", inputNama.value);
});
```
Ketika tombol **Simpan** ditekan:
```
Isi Input
↓
JavaScript
↓
localStorage
```
Data nama sekarang tersimpan di browser.
***
## 🔷 Menampilkan Data yang Sudah Disimpan
Misalnya HTML kita:
```
```
JavaScript:
```
let nama = localStorage.getItem("nama");
document.getElementById("hasil").textContent = nama;
```
Kalau sebelumnya kita menyimpan:
```
Andi
```
Maka halaman akan menampilkan:
```
Andi
```
Walaupun halaman sudah di-refresh.
***
## 🔷 Kapan localStorage Cocok Digunakan?
`localStorage` cocok untuk data sederhana seperti:
* Tema website
* Nama pengguna
* Preferensi pengguna
* Keranjang sederhana
* Progress latihan
* Draft sederhana
* Pengaturan aplikasi
Tapi jangan gunakan `localStorage` untuk menyimpan:
* Password
* Data sangat rahasia
* Informasi sensitif
Karena data `localStorage` dapat dilihat melalui browser.
***
## 🔷 Kesimpulan
Kalau ingat `localStorage`, ingat 4 perintah ini:
```
// SIMPAN
localStorage.setItem("nama", "Andi");
// AMBIL
localStorage.getItem("nama");
// HAPUS SATU
localStorage.removeItem("nama");
// HAPUS SEMUA
localStorage.clear();
```
Dan untuk Array / Object:
```
JSON.stringify()
JSON.parse()
```
> **localStorage = tempat sederhana untuk menyimpan data di browser agar data tidak langsung hilang ketika halaman di-refresh.**