HomeJavaScript
Membuat Aplikasi Sederhana dengan Local Storage
Aplikasi yang akan kita buat kali ini adalah aplikasi To-Do-List yang sangatlah sederhana.
Yasya El HakimOctober 31, 2020 - November 04, 2021
Mungkin, terdapat beberapa di antara kalian (termasuk saya) ada yang lebih suka langsung terjun
dalam membuat suatu hal tanpa mempelajarinya dari awal. Maka dari itu, disini saya akan
membagikan tutorial atau cara membuat sebuah aplikasi sederhana dengan
memanfaatkan localStorage dengan penjelasan yang mudah untuk dimengerti.
Aplikasi yang akan kita buat kali ini adalah aplikasi To-Do-List yang sangatlah sederhana.
Kelebihan dari aplikasi yang akan kita buat ini adalah kita tidak membutuhkan database untuk
menyimpan data dan sangat mudah untuk dibuat.
Meskipun disini kita tidak membutuhkan databse, kita akan menggunakan Local Storage untuk
menyimpan data tersebut pada Browser. Selama kita tidak menghapus Cache Browser, maka
data tersebut tetap akan tersimpan.
Jadi disini kita akan membuat aplikasi seperti berikut:
Lihat Live Demo | Lihat Source Code
Table of Contents
Persyaratan
Pengenalan tentang Web Storage
Membuat Halaman Front-End
Mengatur Fungsionalitas JavaScript
Menambahkan Local Storage
Kesimpulan
Persyaratan
Sebelum melanjutkan, pastikan kalian sudah memahami dasar-dasar dari HTML dan CSS. Selain
itu, kalian juga harus mengerti cara menggunakan atau cara menulis kode JavaScript serta tipe
datanya. Terakhir, sebagai nilai plusnya, kalian juga harus memiliki pengetahuan dasar tentang
DOM.
Lagi-lagi, disini kita "PERLU" mengetahui dasar-dasar dari HTML, CSS dan JavaScript. Apa
jadinya jika kalian tidak mengetahuinya sama sekali.
Pengenalan tentang Web Storage
Web Storage adalah suatu Data yang tersimpan secara lokal pada Browser pengguna. Terdapat
dua tipe dari Web Storage:
Local Storage - Suatu data yang akan tersimpan selamanya (Tidak akan kadaluarsa) bahkan
ketika Browser ditutup.
Session Storage - Suatu data yang akan terhapus ketika Browser ditutup.
Menyimpan suatu data sangatlah berguna ketika kita menggunakannya dengan benar, contohnya
seperti toggle Dark/Light mode pada Website ini. Selain itu, contoh penggunaan Web Storage
adalah menyimpan Item Keranjang belanja (Cart) pada eCommerce, serta menyimpan Login
pengguna.
Sebelum adanya Local Storage dan Session Storage, terdapat metode lain yang disebut
dengan Cookie yang fungsinya sama seperti kedua jenis Web Storage diatas - yaitu menyimpan
suatu hal secara lokal dan sementara. Disini, Local Storage memiliki batasan penyimpanan yang
terbilang besar yaitu 5MB dan tidak akan mengirimkan data tersebut setiap permintaan HTTP
(HTTP Request). Jadi, Local Storage adalah salah satu pilihan terbaik untuk penyimpanan di sisi
pengguna (Client-Side Storage).
Terdapat beberapa metode dari localStorage yang akan kita gunakan, antara lain:
setItem() - Menambahkan Key dan Nilai kedalam Local Storage;
getItem() - Menerima Nilai berdasarkan Key dari Local Storage;
removeItem() - Menghapus Item berdasarkan Key dari Local Storage;
clear() - Menghapus Semua Data yang ada di Local Storage.
Kalian dapat mencobanya pada JavaScript Console pada Browser dan tuliskan perintah berikut:
localStorage
Outputnya akan seperti berikut:
Storage { length: 0 }
Sekarang, mari kita coba menambahkan data kedalam localStorage dengan menggunakan
metode setItem(). Sebagai contoh, kita akan menggunakan key dan nilai sebagai namanya:
[Link]("key", "nilai")
Jika kalian melihat localStorage pada Console, maka kalian akan
melihat key dan nilai baru. Outputnya akan seperti berikut:
Jika kalian ingin mendapatkan nilai dari key tertentu, kalian dapat menggunakan
metode getItem():
[Link]("key")
Outputnya akan seperti berikut:
Jika kalian ingin menghapus suatu Data pada Local Storage, kalian dapat menggunakan
metode removeItem():
[Link]("key")
Terakhir. Jika kalian ingin menghapus semua/seluruh data pada Local Storage, kalian dapat
menggunakan metode clear():
[Link]()
Mudah bukan? Mari kita lanjutkan.
Membuat Halaman Front-End
Pertama-tama, kita harus membuat halaman dengan HTML yang diberi nama [Link].
Disini, saya juga menggunakan Bootstrap 5 Alpha sebagai CSS Framework-nya. Berikut adalah
contoh kode dari [Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>localStorage To-Do-List | EL Creative Academy</title>
<link rel="stylesheet"
href="//[Link]/bootstrap/5.0.0-alpha2/css/bootstrap.m
[Link]">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<h1 class="navbar-brand"><a href="#"></a>To-Do-List</h1>
</div>
</nav>
<div class="container my-5">
<div class="row d-flex justify-content-center">
<div class="col-12 col-lg-8">
<!-- Input To-Do-List -->
<!-- Daftar To-Do-List -->
</div>
<script src="[Link]"></script>
</body>
</html>
Disini, kita akan mengatur beberapa hal yaitu:
Input teks untuk menambahkan item baru;
List (Daftar) untuk menampilkan item yang baru ditambahkan kedalam halaman;
Tombol untuk menghapus semua item yang ada.
Tambahkan kode berikut kedalam/dibawah bagian <!-- Input To-Do-List -->:
<!-- Input To-Do-List -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title">Input To-Do-List:</h5>
</div>
<div class="card-body">
<form class="mb-3">
<label for="inputData" class="form-label">Masukkan Data:</label>
<input type="text" class="form-control" id="inputData" aria-
describedby="infoInputData" placeholder="Nama Item" required>
<div id="infoInputData" class="form-text">Ketikkan dan tekan
Enter.</div>
</form>
</div>
</div>
Lalu, tambahkan kode berikut kedalam/dibawah bagian <!-- Daftar To-Do-List -->:
<!-- Daftar To-Do-List -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title">Daftar To-Do-List:</h5>
</div>
<div class="card-body">
<div class="mb-3">
<ul>
</ul>
</div>
</div>
<div class="card-footer">
<div class="text-right">
<button class="btn btn-danger">Hapus Semua</button>
</div>
</div>
</div>
Keseluruhan kodenya akan terlihat seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>localStorage To-Do-List | EL Creative Academy</title>
<link rel="stylesheet"
href="//[Link]/bootstrap/5.0.0-alpha2/css/bootstrap.m
[Link]">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<h1 class="navbar-brand"><a href="#"></a>To-Do-List</h1>
</div>
</nav>
<div class="container my-5">
<div class="row d-flex justify-content-center">
<div class="col-12 col-lg-8">
<!-- Input To-Do-List -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title">Input To-Do-List:</h5>
</div>
<div class="card-body">
<form class="mb-3">
<label for="inputData" class="form-label">Masukkan
Data:</label>
<input type="text" class="form-control" id="inputData"
aria-describedby="infoInputData" placeholder="Nama Item" required>
<div id="infoInputData" class="form-text">Ketikkan dan
tekan Enter.</div>
</form>
</div>
</div>
<!-- Daftar To-Do-List -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title">Daftar To-Do-List:</h5>
</div>
<div class="card-body">
<div class="mb-3">
<ul>
</ul>
</div>
</div>
<div class="card-footer">
<div class="text-right">
<button class="btn btn-danger">Hapus Semua</button>
</div>
</div>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
Outputnya dari kode diatas akan terlihat seperti berikut:
Mungkin, itu saja yang kita butuhkan pada bagian Front-End. Selanjutnya, kita akan fokus dalam
menambahkan fungsionalitas dengan menggunakan JavaScript.
Mengatur Fungsionalitas JavaScript
Disini, kita akan mengimplementasikan fungsionalitas yang sangat sederhana. Ketika kita
memasukkan suatu item melalui input dan menekan tombol Enter pada Keyboard, maka kita
akan menampilkan item tersebut kedalam tag Unordered List (ul) yang telah kita buat.
Pertama-tama, kita akan menggunakan beberapa variabel untuk elemen yang ada di halaman
Front-End yaitu Form, Unordered List, tombol, dan teks input.
Buatlah sebuah file bernama [Link] (pada folder yang sama dengan [Link]), dan
masukkan kode berikut kedalamnya:
const form = [Link]('form');
const ul = [Link]('ul');
const button = [Link]('button');
const input = [Link]('inputData');
// Fungsi
// Event Listener
Selanjutnya, kita harus membuat sebuah fungsi untuk membuat elemen li yang akan kita
gunakan berkali-kali. Disini, kita beri nama fungsi buatLi(). Nantinya, fungsi tersebut berguna
untuk membuat elemen li, mengeatur teks dari elemen kedalam parameter dan menambahkan
daftar item kedalam elemen ul. Tambahkan kode berikut tepat dibawah komentar // Fungsi:
// Fungsi
const buatLi = (text) => {
const li = [Link]('li')
[Link] = text
[Link](li)
}
Disini, saya juga akan menambahkan Event Listener kedalam Form untuk melihat tindakan
submit pada input - yaitu ketika kita menekan tombol Enter pada
Keyboard. [Link]() akan mencegah Form dari tindakan Submit secara default
yang tidak kita inginkan, karena kita tidak mengirimkan data apapun ke server.
Sebagai gantinya, Form akan mengirimkan nilai dari input. Kita juga akan memanggil
fungsi buatLi() yang akan berguna untuk membuat item teks dari nilai input dan
menambahkannya kedalam DOM. Terakhir, kita akan mengatur nilai yang ada di dalam input
menjadi kosong, sehingga kita tidak perlu menghapusnya secara manual. Tambahkan kode
berikut tepat dibawah komentar // Event Listener:
// Event Listener
[Link]('submit', function (e) {
[Link]();
buatLi([Link]);
[Link] = '';
});
Keseluruhan kode JavaScript akan terlihat seperti berikut:
const form = [Link]('form');
const ul = [Link]('ul');
const button = [Link]('button');
const input = [Link]('inputData');
// Fungsi
const buatLi = (text) => {
const li = [Link]('li');
[Link] = text;
[Link](li);
};
// Event Listener
[Link]('submit', function (e) {
[Link]();
// Input Array
buatLi([Link]);
[Link] = '';
});
Dengan hanya menggunakan beberapa baris kode, kita dapat membuat aplikasi sederhana untuk
menambahkan item kedalam List:
Eits, masih belum selesai. Ketika kita merefresh Browser, maka item tersebut juga akan hilang.
Maka dari itu, kita harus mengintegrasikannya kedalam Local Storage sehingga kita tidak akan
kehilangan data tersebut.
Menambahkan Local Storage
Sekarang, kita akan memasukkan beberapa fungsionalitas kedalam aplikasi tersebut. Pertama,
setiap form di submit, maka nilai dari input harus ditambahkan kedalam localStorage dan
muncul pada Front-End. Kita juga akan menggunakan Loop untuk menampilkannya kedalam
List. Terakhir, kita akan membuat fungsi dari tombol "Hapus Semua" untuk menghapus semua
item yang ada di dalam Local Storage.
Mari kita buat sebuah array dan key localStorage bernama item. localStorage hanya
mendukung string sebagai nilainya dan disini kita akan menyimpannya kedalam array.
Kita dapat menyelesaikannya dengan menggunkan [Link]() untuk mengubah data
array kedalam string. Selain itu, kita juga akan menggunakan [Link]() untuk mengubah
konten dari localStorage kedalam variabel data. Masukkan kode berikut tepat dibawah kode
JavaScript yang telah kita buat sebelumnya:
// Deklarasi Constant
let itemArray = [];
[Link]('item', [Link](itemArray));
const data = [Link]([Link]('item'));
// Loop
Pada Form Event Listener, kita akan menambahkan nilai input kedalam array, kemudian
mengatur localStorage baru dan memperbarui nilainya. Tambahkan kode berikut tepat dibawah
komentar // Input Array:
// Input Array
[Link]([Link]);
[Link]('item', [Link](itemArray));
Selanjutnya, kita akan menggunakan Loop sebagai pengulangan dari semua variabel data yang
terdiri dari data localStorage dan menjalankan ulang fungsi buatLi(). Disini, kita akan
menampilkan semua data yang tersimpan kedalam Front-End setiap kali kita membuka aplikasi
tersebut. Tambahkan kode berikut tepat dibawah komentar // Loop:
// Loop
[Link]((item) => {
buatLi(item);
});
// Hapus Semua
Terakhir, kita akan membuat Event Click pada tombol "Hapus Semua" yang berguna untuk
menghapus semua data dari localStorage dan juga daftar item pada Front-End. Tambahkan
kode berikut tepat dibawah komentar // Hapus Semua:
// Hapus Semua
[Link]('click', function () {
[Link]()
while ([Link]) {
[Link]([Link])
}
});
Jika kalian berhasil, maka segala hal yang kita masukkan melalui input akan muncul pada Front-
End. Kalian dapat mengeceknya dengan menggunakan localStorage pada Console:
Masih belum selesai. Ketika kita menutup atau merefresh halaman pada Browser, semua
informasi pada localStorage dan Front-End akan hilang.
Disini, array itemArray akan ter-reset menjadi kosong setiap kali Script dijalankan. Kita dapat
mengatasinya dengan membuat Statement Coditional yang akan mengecek jika localStorage
telah ada. Mari kita ubah kode let itemArray = []; menjadi seperti berikut:
let itemArray = [Link]('item') ?
[Link]([Link]('item')) : [];
Sekarang, kita telah selesai membuat aplikasi sederhana dengan sempurnya. Kita dapat
memasukkan informasi dan merefresh atau menutup Browser dan data yang kita masukkan akan
tetap tersimpan. Berikut adalah keseluruhan kode JavaScript:
const form = [Link]('form');
const ul = [Link]('ul');
const button = [Link]('button');
const input = [Link]('inputData');
// Fungsi
const buatLi = (text) => {
const li = [Link]('li');
[Link] = text;
[Link](li);
};
// Event Listener
[Link]('submit', function (e) {
[Link]();
// Input Array
[Link]([Link]);
[Link]('item', [Link](itemArray));
buatLi([Link]);
[Link] = '';
});
// Deklarasi Constant
let itemArray = [Link]('item') ?
[Link]([Link]('item')) : [];
[Link]('item', [Link](itemArray));
const data = [Link]([Link]('item'));
// Loop
[Link]((item) => {
buatLi(item);
});
// Hapus Semua
[Link]('click', function () {
[Link]()
while ([Link]) {
[Link]([Link])
});
Berikut adalah hasil finalnya:
Lihat Live Demo | Lihat Source Code
Kesimpulan
Disini, kita telah belajar cara membuat aplikasi To-Do-List sederhana yang dapat menyimpan
data walaupun Browser di refresh ataupun ditutup. Semoga kalian dapat memahaminya dengan
mudah. Jika artikel ini bermanfaat, silahkan bagikan ini kepada teman-teman atau saudara kalian.
Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah
berkunjung di EL Creative Academy.