Simpan Data ke LocalStorage Dengan JavaScript

By Posted on

LocalStorage adalah tipe penyimpanan data sederhana yang ada di browser untuk menyimpan informasi dalam bentuk pasangan key dan nilai. Dalam artikel ini, kita akan belajar cara simpan data ke LocalStorage dan membacanya kembali dengan JavaScript.

1. Menyimpan Data ke LocalStorage:

Untuk menyimpan data ke LocalStorage, kita dapat menggunakan perintah setItem. Berikut adalah contoh penggunaannya:

// Simpan data ke LocalStorage
const inputNama = "Nama Pengguna";
localStorage.setItem('nama', inputNama);

Pada contoh ini, kita menyimpan nama pengguna ke LocalStorage dengan menggunakan key ‘nama’, sehingga hasilnya di browser (inspect) adalah sebagai berikut:

Simpan Data ke LocalStorage Dengan JavaScript


2. Membaca Data dari LocalStorage:

Untuk membaca kembali data dari LocalStorage, kita dapat menggunakan perintah getItem. Berikut adalah contohnya: 

// Baca data dari LocalStorage
const storedName = localStorage.getItem('nama');

// Gunakan data yang telah dibaca
console.log("Nama Pengguna: " + storedName);

Pada contoh ini, kita membaca kembali nama pengguna yang telah disimpan di LocalStorage dengan menggunakan key ‘nama’.

3. Menghapus Data dari LocalStorage:

Jika kita perlu menghapus data dari LocalStorage, kita dapat menggunakan method removeItem. Contoh: 

// Hapus data dari LocalStorage
localStorage.removeItem('nama');

Dengan menggunakan removeItem, kita dapat menghapus data yang telah disimpan dengan key tertentu.

4. Tips dan Perhatian:

  • Pastikan untuk tidak menyimpan data rahasia atau sensitif di LocalStorage karena data di sana dapat diakses oleh JavaScript pada halaman yang sama.
  • Selalu periksa apakah nilai yang Anda baca dari LocalStorage tidak null sebelum menggunakannya, untuk menghindari error.


5. Kesimpulan:

Menyimpan dan membaca data dari LocalStorage adalah cara sederhana untuk menyimpan informasi di sisi klien. Namun, gunakan LocalStorage dengan bijak dan hindari menyimpan informasi yang sangat penting atau rahasia di sana.

Semoga artikel Simpan Data ke LocalStorage Dengan JavaScript ini bermanfaat.