0

0

0

share

#programmer#javascript#Tutorial#fullstack

Reactions0 Reactions

0 Komentar

Tutorial Penyimpanan Data Menggunakan Javascript LocalStorage

Profile

Faisal Hanafi • 12 Juli 2023

Tutorial Penyimpanan Data Menggunakan Javascript LocalStorage

Hai coders kali ini kita akan belajar mengenai JLS (javascript localstorage) bagi yang belum familiar JavaScript Local Storage adalah fitur dalam browser web yang memungkinkan kita untuk menyimpan data secara persisten di sisi klien (client-side). Ini berarti data tetap ada bahkan setelah pengguna menutup browser atau mengunjungi kembali halaman web tersebut. Data disimpan dalam bentuk pasangan kunci-nilai, di mana kunci digunakan untuk mengakses nilai yang terkait.

Berikut adalah tutorial untuk menggunakan Local Storage dalam JavaScript:

  1. Buat Tampilan

Buat file HTML kosong dan beri nama file tersebut (misalnya, localstorage.html). kita akan menulis dan menguji kode JavaScript di dalam file ini.

  1. Menyimpan Data di Local Storage

Dalam file HTML, tambahkan kode JavaScript berikut untuk menyimpan data ke Local Storage:

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage Demo</title>
</head>
<body>
    <script>
        // Simpan data ke Local Storage
        localStorage.setItem('nama', 'John');
        localStorage.setItem('umur', 25);

        // Menampilkan data yang disimpan di Local Storage
        console.log(localStorage.getItem('nama'));
        console.log(localStorage.getItem('umur'));
    </script>
</body>
</html>

Kode di atas menggunakan metode setItem untuk menyimpan data ke Local Storage. kita dapat memberikan kunci dan nilai untuk data yang ingin kita simpan. Di sini, kita menyimpan nama dengan nilai 'John' dan umur dengan nilai 25.

  1. Membaca Data dari Local Storage

Tambahkan kode JavaScript berikut untuk membaca data dari Local Storage:

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage Demo</title>
</head>
<body>
    <script>
        // Membaca data dari Local Storage
        var nama = localStorage.getItem('nama');
        var umur = localStorage.getItem('umur');

        // Menampilkan data yang dibaca
        console.log(nama);
        console.log(umur);
    </script>
</body>
</html>

Kode di atas menggunakan metode getItem untuk membaca data dari Local Storage. Dalam contoh ini, nilai nama dan umur akan ditampilkan di console.

  1. Menghapus Data dari Local Storage

Jika kita ingin menghapus data dari Local Storage, gunakan metode removeItem atau metode clear. Tambahkan kode JavaScript berikut untuk menghapus data dari Local Storage:

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage Demo</title>
</head>
<body>
    <script>
        // Menghapus data dari Local Storage
        localStorage.removeItem('nama');
        localStorage.removeItem('umur');

        // Menampilkan data yang dihapus
        console.log(localStorage.getItem('nama'));
        console.log(localStorage.getItem('umur'));
    </script>
</body>
</html>

Kode di atas menggunakan metode removeItem untuk menghapus data dengan kunci yang diberikan dari Local Storage.

Alternatifnya, kita juga dapat menggunakan metode clear untuk menghapus semua data dari Local Storage:

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage Demo</title>
</head>
<body>
    <script>
        // Menghapus semua data dari Local Storage
        localStorage.clear();

        // Menampilkan data yang dihapus
        console.log(localStorage.getItem('nama'));
        console.log(localStorage.getItem('umur'));
    </script>
</body>
</html>

Simpan file HTML dan buka di browser kita. Buka konsol developer di browser (biasanya dengan menekan F12 dan memilih tab "Console"). kita akan melihat data yang disimpan di Local Storage ditampilkan di konsol.

Itulah tutorial sederhana untuk menggunakan Local Storage dalam JavaScript. Local Storage untuk menyimpan data secara lokal di browser pengguna, yang dapat digunakan untuk menyimpan preferensi pengguna, status sesi, atau data lain yang diperlukan dalam aplikasi web.