Worth It Nggak Sih Pakai Local Storage untuk Website?

Kamu pernah nggak nemuin situs web yang harus menginput data berulangkali setiap mau akses atau muat ulang halaman?

Kalau iya, berarti halaman yang kamu akses, belum pakai Local Storage. Tapi, apakah worth it pakai local storage untuk website saat ini? 👀🧐

Yuk, kita bahas lebih mendalam!

Apa itu Local Storage?

Sebelum menjawab pertanyaan di atas, sebaiknya kita berkenalan dulu dengan yang namanya Local Storage. Local Storage adalah sebuah fitur untuk kita menyimpan data pengguna di peramban web dengan dalam format key-value pada sisi klien.

Keuntungannya, data yang disimpan di Local Storage akan bersifat persisten, yang artinya data tersebut akan tetap ada meski browser ditutup atau halaman dimuat ulang. Canggihnya lagi, data akan hilang kalau dihapus secara manual oleh pengguna atau aplikasi. Keren, kan?😎🔥

Kenapa Sih Harus Pakai Local Storage?

Bayangin deh kalau kamu bikin aplikasi web yang ngumpulin data dari pengguna, tapi sistemnya pengguna harus input ulang data yang sama terus-meneru. Jelas banget pengguna bakal kesal dan auto cabut dari situs web kamu. Nah, dengan Local Storage kamu bisa ngatasin masalah ini!

Jadi, website kamu bakal jauh lebih cepat dan efisien, tanpa takut ngeganggu performa server.

Gimana Cara Kerja Local Storage?

Pada sisi klien, Local Storage menyimpan datanya dengan bentuk pasangan key-value dan tersimpan string. Dalam objek atau array di Local Storage menggunakan format JSON, sehingga kita perlu mengubah ke format tersebut terlebih dahulu.

Contoh Sederhana Penggunaan Local Storage

• Menyimpan Data dengan .setItem
  Dalam menyimpan data di Local Storage, kamu bisa menuliskan .setItempada kode, seperti berikut ini:

    localStorage.setItem('username', 'Agus');
    localStorage.setItem('age', '35');
  

  Penjelasan Kode di atas:
  .setItem digunakan untuk menyimpan data dengan kunci tertentu.

• Mengambil Data dengan .getItem
  Saat mengambil data di Local Storage, kamu bisa menuliskan kode seperti berikut:

    var username = localStorage.getItem('username');
    var age = localStorage.getItem('age');
    console.log(username); // Output: Agus
    console.log(age); // Output: 35
  

  Penjelasan Kode di atas:
  .getItem digunakan untuk mengambil nilai yang tersimpan berdasarkan kunci (key) yang diberikan.

• Menghapus Data dengan .removeItem
  Kamu bisa tentukan nilai yang ingin dihapus, misal ingin menghapus username, kamu bisa tuliskan kode berikut:

    localStorage.removeItem('username');
  

• Menghapus Semua Data Lokal
  Selain bisa menghapus per item, kamu juga bisa menghapus semua data dengan menggunakan .clear seperti berikut:

    localStorage.clear();
  

Kelebihan dan Kekurangan Local Storage

Tentu semua fitur punya kelebihan dan kekurangan masing-masing. Berikut Kelebihan dan Kekurangan Local Storage, antara lain:

Kelebihan Local Storage

• Penyimpanan Bersifat Persiten
  Local Storage akan menyimpan data secara persinten, jadi pengguna nggak perlu memasukan datanya kembali setiap membuka website. Jelas cara ini bikin lebih mudah dalam menyimpan preferensi pengguna tanpa harus menggunakan database.

• Kemudahan Penggunaan
  API yang digunakan itu sederhana dan mudah digunakan, jadi kamu cukup pakai .setItem dan .getItem untuk menyimpan dan mengambil data.

• Kapastias Penyimpanan Besar
  Kalau dibandingin dengan cookies, Local Storage punya kapasitas penyimpanan yang lebih besar (biasanya 5MB per domain). Jadi, kamu bisa bebas menyimpandi sisi klien.

Kekurangan Local Storage

• Keamanan yang Kurang
  Karena Local Storage nggak terenskripsi, kamu perlu hati-hati. Jangan pernah menyimpan data yang sifatnya sensitif, kayak password atau informasi pribadi lainnya yang bisa diakses siapa saja yang pakai device pengguna.
  Selain itu, adanya potensi serangan Cross-Site Scripting (XSS) yang menyebabkan data di dalam Local Storage rentan dicuri.

• Hanya Bisa Menyimpan Data String
  Data yang disimpan di Local Storage, hanya bisa menyimpan dalam bentuk string saja. Kalau mau menyimpan objek atau array, kamu perlu mengubah format ke JSON dulu dengan menuliskan JSON.stringify(). Kamu bisa mengubah objek atau array ke string dengan cara berikut:

    var user = { name: 'Agus', age: 30 }; 
    localStorage.setItem('user', JSON.stringify(user));
  

  Selain itu, kamu juga bisa mengubahnya kembali menjadi objek menggunakan JSON.parse() seperti berikut:

    var storedUser = JSON.parse(localStorage.getItem('user')); 
    console.log(storedUser.name); // Output: Agus
  

• Keterbatasan Kapasitas
  Ya walaupun kapasitasnya lebih besar dibanding Cookies, Local Storage masih tetap memiliki batasan (biasanya 5MB per domain). Jadi, perlu bijak dalam menyimpan data.

So…Worth It Nggak Pakai Local Storage?

Jawabannya tergantung dari kebutuhan aplikasi yang kamu buat. Kalau kamu butuh menyimpan data keinginan pengguna, kayak username, tema web, bahasa tanpa harus bolak-balik kirim data ke server, Local Storage pilihan yang tepat.

Tapi, kalau kamu pengin menyimpan data yang sangat sensitif, seperti password atau informasi pribadi, jangan coba menyimpannya di Local Storage.

Walau Local Storage bisa bantu aplikasi kamu jadi efisien, kamu juga harus tetap waspada ya genz dengan masalah keamanannya. Pastikan data yang disimpan aman dan sesuai dengan kebutuhannya!

---

Mau belajar lebih mendalam terkait JavaScript?
Bisa banget eksplor materi JavaScript secara lengkap mulai dari nol di Sekolah Koding!

Yuk belajar dengan cara yang menyenangkan, dengan materi lengkap dalam bentuk teks dan video di Sekolah Koding.👩‍💻