Cara menggunakan set local storage javascript

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:
  
  

    
      Masukkan Data:
      
      
Ketikkan dan tekan Enter.
    
  

Lalu, tambahkan kode berikut kedalam/dibawah bagian :

  

    Daftar To-Do-List:
  
  

    

      

        
      
    
  
  

    

      Hapus Semua
    
  

Keseluruhan kodenya akan terlihat seperti berikut:

  
  
  localStorage To-Do-List | EL Creative Academy

  


  
    

      
To-Do-List
    
  

  

    

      


        
        

          

            Input To-Do-List:
          
          

            
              Masukkan Data:
              
              
Ketikkan dan tekan Enter.
            
          
        

        
        

          

            Daftar To-Do-List:
          
          

            

              

                
              
            
          
          

            

              Hapus Semua
            
          
        

    

    

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 script.js [pada folder yang sama dengan index.html], dan masukkan kode berikut kedalamnya:

const form = document.querySelector['form'];
const ul = document.querySelector['ul'];
const button = document.querySelector['button'];
const input = document.getElementById['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 = document.createElement['li']
    li.textContent = text
    ul.appendChild[li]
}

Disini, saya juga akan menambahkan Event Listener kedalam Form untuk melihat tindakan submit pada input - yaitu ketika kita menekan tombol Enter pada Keyboard. e.preventDefault[] 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
form.addEventListener['submit', function [e] {
    e.preventDefault[];

    buatLi[input.value];
    input.value = '';
}];

Keseluruhan kode JavaScript akan terlihat seperti berikut:

const form = document.querySelector['form'];
const ul = document.querySelector['ul'];
const button = document.querySelector['button'];
const input = document.getElementById['inputData'];

// Fungsi
const buatLi = [text] => {
    const li = document.createElement['li'];
    li.textContent = text;
    ul.appendChild[li];
};

// Event Listener
form.addEventListener['submit', function [e] {
    e.preventDefault[];

    // Input Array

    buatLi[input.value];
    input.value = '';
}];

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 JSON.stringify[] untuk mengubah data array kedalam string. Selain itu, kita juga akan menggunakan JSON.parse[] untuk mengubah konten dari localStorage kedalam variabel data. Masukkan kode berikut tepat dibawah kode JavaScript yang telah kita buat sebelumnya:

// Deklarasi Constant
let itemArray = [];

localStorage.setItem['item', JSON.stringify[itemArray]];
const data = JSON.parse[localStorage.getItem['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
itemArray.push[input.value];
localStorage.setItem['item', JSON.stringify[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
data.forEach[[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
button.addEventListener['click', function [] {
    localStorage.clear[]
    while [ul.firstChild] {
        ul.removeChild[ul.firstChild]
    }
}];

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 = localStorage.getItem['item'] ? JSON.parse[localStorage.getItem['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 = document.querySelector['form'];
const ul = document.querySelector['ul'];
const button = document.querySelector['button'];
const input = document.getElementById['inputData'];

// Fungsi
const buatLi = [text] => {
    const li = document.createElement['li'];
    li.textContent = text;
    ul.appendChild[li];
};

// Event Listener
form.addEventListener['submit', function [e] {
    e.preventDefault[];

    // Input Array
    itemArray.push[input.value];
    localStorage.setItem['item', JSON.stringify[itemArray]];

    buatLi[input.value];
    input.value = '';
}];

// Deklarasi Constant
let itemArray = localStorage.getItem['item'] ? JSON.parse[localStorage.getItem['item']] : [];

localStorage.setItem['item', JSON.stringify[itemArray]];
const data = JSON.parse[localStorage.getItem['item']];

// Loop
data.forEach[[item] => {
    buatLi[item];
}];

// Hapus Semua
button.addEventListener['click', function [] {
    localStorage.clear[]
    while [ul.firstChild] {
        ul.removeChild[ul.firstChild]
    }
}];

Berikut adalah hasil finalnya:

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.

Updated: Thursday, 04 November 2021

Apa itu local storage di JavaScript?

Apa kelebihan menyimpan data pada local storage dibandingkan dengan cookies?

Apa yang dimaksud dengan Web Storage?