Blog

Mobile Development

Local Storage adalah: Fungsi, Cara Kerja, dan Contohnya

Irhan Hisyam Dwi Nugroho

•

21 May 2025

•

111

Local storage adalah fitur di browser yang memungkinkan data disimpan langsung di perangkat pengguna. Ini sering dipakai untuk menyimpan preferensi seperti tema atau nama pengguna.

MinDi ajak Warga Bimbingan buat kenalan lebih dekat sama local storage—kita bahas fungsinya, cara kerjanya, dan contoh penerapannya biar makin paham!

Apa Itu Local Storage?

Local storage adalah fitur penyimpanan data yang disediakan oleh browser untuk menyimpan informasi secara lokal di perangkat pengguna.

Data yang disimpan di local storage tidak akan hilang meskipun halaman di-refresh atau browser ditutup, kecuali dihapus secara manual oleh pengguna atau melalui kode.

Fitur ini sangat berguna untuk menyimpan preferensi pengguna, status login, atau data sementara tanpa perlu server.

Local storage bekerja dengan sistem key-value dan dapat diakses menggunakan JavaScript dengan sintaks yang sederhana.

Fungsi Local Storage

Sebelum membahas cara kerjanya, MinDi mau ajak Warga Bimbingan pahami dulu fungsi-fungsinya. Local storage adalah fitur simpel tapi punya peran penting di banyak situs web. Yuk, simak bareng!

1. Menyimpan Preferensi Pengguna

Local storage sering digunakan untuk menyimpan pilihan pengguna, seperti mode gelap atau bahasa tampilan.

Dengan begitu, saat pengguna membuka kembali situs, tampilannya akan langsung sesuai preferensi sebelumnya. Ini bikin pengalaman pengguna jadi lebih nyaman dan personal.

2. Mengurangi Beban Permintaan ke Server

Karena data disimpan langsung di browser, tidak semua informasi perlu diminta ulang dari server.

Ini bisa mempercepat waktu muat halaman dan mengurangi beban jaringan. Cocok banget buat situs yang ingin tetap ringan dan responsif.

3. Mempertahankan Data Saat Reload

Data yang disimpan di local storage tetap ada meskipun halaman di-reload atau browser ditutup.

Ini berguna, misalnya, untuk menjaga isi formulir atau status keranjang belanja. Jadi, pengguna nggak perlu mulai dari awal setiap kali membuka ulang halaman.

4. Mendukung Aplikasi Web Offline

Local storage memungkinkan aplikasi web bekerja sebagian meskipun tanpa koneksi internet.

Data penting bisa tetap diakses karena sudah tersimpan di perangkat. Ini sangat berguna untuk aplikasi yang butuh kecepatan atau sering dipakai di area tanpa sinyal stabil.

Perbedaan Local Storage vs Session Storage

Sumber: Canva

Local storage adalah penyimpanan data di browser yang sering disamakan dengan session storage. Tapi keduanya punya perbedaan penting—yuk, kita bahas!

1. Masa Berlaku Data

Local storage menyimpan data tanpa batas waktu, jadi datanya tetap ada meski browser ditutup. Ini cocok untuk menyimpan data yang perlu bertahan lama, seperti preferensi tema atau status login.

Session storage hanya bertahan selama tab atau jendela browser masih terbuka. Begitu ditutup, semua data di dalamnya akan langsung hilang secara otomatis.

2. Ruang Penyimpanan

Local storage umumnya memiliki kapasitas sekitar 5 hingga 10 MB, tergantung browser. Ini cukup besar untuk menyimpan informasi yang tidak terlalu kompleks.

Session storage memiliki kapasitas lebih kecil karena hanya digunakan untuk data sementara. Karena itu, penggunaannya harus lebih hemat dan terfokus.

3. Akses Antar Tab atau Jendela

Data di local storage bisa diakses oleh semua tab atau jendela dari domain yang sama. Jadi, saat Warga Bimbingan buka beberapa halaman dari situs yang sama, datanya tetap konsisten.

Berbeda dengan session storage, yang hanya aktif di tab tempat data itu disimpan. Jika Warga Bimbingan buka tab baru, session storage-nya tidak terbawa.

4. Penggunaan Umum

Local storage sering dipakai untuk menyimpan data pengguna seperti nama, bahasa, atau isi keranjang belanja. Semua informasi itu bisa tetap ada meski pengguna datang kembali ke situs setelah beberapa hari.

Session storage cocok untuk menyimpan data sementara seperti langkah pengguna dalam proses checkout. Begitu proses selesai atau tab ditutup, datanya tidak diperlukan lagi.

5. Keamanan dan Privasi

Kedua jenis storage ini menyimpan data di sisi pengguna (client-side), jadi tidak disarankan menyimpan informasi sensitif seperti password secara langsung. Jika ingin menyimpan data penting, perlu enkripsi tambahan.

Karena sifatnya yang sementara, session storage sedikit lebih aman dari risiko jangka panjang. Tapi tetap saja, keamanan harus jadi prioritas utama dalam semua jenis penyimpanan.

Cara Menggunakan Local Storage

Warga Bimbingan, local storage adalah fitur yang mudah digunakan, terutama kalau sudah kenal dasar JavaScript. Yuk, MinDi ajak praktik langsung cara pakainya langkah demi langkah!

1. Menyimpan Data

Untuk menyimpan data di local storage, kamu bisa gunakan metode setItem(). Metode ini butuh dua argumen: kunci (key) dan nilai (value) yang ingin disimpan. Nilainya otomatis akan disimpan sebagai string.

localStorage.setItem("nama", "Warga Bimbingan");

2. Mengambil Data

Kalau ingin mengambil data yang sudah disimpan, gunakan getItem(). Kamu cukup masukkan nama kunci yang sesuai, dan local storage akan mengembalikan nilainya. Jangan lupa cek dulu apakah datanya ada, ya!

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

console.log(nama); // Output: Warga Bimbingan

3. Menghapus Data Tertentu

Kamu bisa menghapus satu data tertentu dari local storage dengan removeItem(). Cukup sebutkan nama kuncinya, dan data tersebut akan langsung hilang. Ini berguna kalau ingin membersihkan data spesifik saja.

localStorage.removeItem("nama");

4. Menghapus Semua Data

Kalau mau menghapus seluruh isi local storage sekaligus, gunakan clear(). Ini akan menghapus semua data yang pernah kamu simpan, jadi hati-hati dalam menggunakannya. Biasanya dipakai saat logout atau reset aplikasi.

localStorage.clear();

Contoh Implementasi Local Storage

Sumber: Canva

Warga Bimbingan, setelah paham cara kerja local storage, yuk praktik bareng MinDi! Kita akan buat halaman sederhana yang bisa menyimpan dan menampilkan nama secara otomatis.

1. Struktur Folder

Pertama, kita buat struktur proyek sederhana seperti ini:

local-storage-demo/

├── index.html

└── script.js

Cukup dua file aja, simpel tapi fungsional.

2. index.html

File HTML ini akan menampilkan input untuk nama, tombol simpan, dan teks sapaan berdasarkan nama yang disimpan.

<!DOCTYPE html>

<head>

<title>Demo Local Storage</title>

</head>

<body>

<h1>Selamat Datang, <span id="output">Warga Bimbingan</span>!</h1>

<button onclick="simpanNama()">Simpan Nama</button>

</body>

</html>

3. script.js

File JavaScript ini akan mengatur proses penyimpanan dan pengambilan nama dari local storage.

// Tampilkan nama saat halaman dimuat

window.onload = function() {

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

if (nama) {

document.getElementById("output").textContent = nama;

}

};

// Simpan nama ke local storage

function simpanNama() {

const inputNama = document.getElementById("namaInput").value;

localStorage.setItem("namaUser", inputNama);

document.getElementById("output").textContent = inputNama;

}

Ingin Jadi Mobile Developer Profesional?

Setelah memahami cara kerja local storage dalam menyimpan data pengguna di browser, sekarang saatnya Warga Bimbingan memanfaatkan ilmu ini ke level berikutnya: membangun aplikasi mobile yang fungsional dan interaktif!

Yuk, ikuti Bootcamp Mobile Developer di dibimbing.id! Di sini, kamu akan belajar langsung cara mengelola data lokal di aplikasi mobile menggunakan teknologi modern seperti Flutter dan Kotlin.

Belajar bareng mentor berpengalaman lewat kurikulum praktis yang fokus pada penerapan nyata—dari local storage, API, hingga deployment ke Play Store. Semua dibimbing step-by-step!

Dengan 840+ hiring partner dan tingkat keberhasilan alumni hingga 96%, peluang kariermu di dunia mobile development terbuka lebar!

Jadi, tunggu apa lagi? Daftar sekarang di sini dan mulai perjalananmu jadi Mobile Developer andalan! #BimbingSampeJadi

Referensi

What is Local Storage? [Buka]
JavaScript localStorage [Buka]