Cara menggunakan set local storage javascript

Tidak juga, mereka pada dasarnya persis sama. Satu menggunakan enkapsulasi (pengambil/penyetel) untuk lebih melindungi data dan untuk penggunaan sederhana. Anda seharusnya menggunakan gaya ini (untuk keamanan).

Yang lain memungkinkan untuk penggunaan yang lebih baik ketika nama (kunci) tidak diketahui dan untuk array dan loop. Gunakan .key() dan .length untuk beralih melalui item penyimpanan Anda tanpa mengetahui nama kuncinya.

Saya menemukan ini sebagai sumber yang bagus: http://diveintohtml5.info/storage.html

Pertanyaan ini mungkin memberikan lebih banyak wawasan juga untuk beberapa: Urutan kunci penyimpanan lokal HTML5

Tambahan:

Jelas ada beberapa kebingungan tentang enkapsulasi. Lihat ini cepat Wikipedia . Tapi serius, saya berharap pengguna situs ini tahu cara menggunakan google.

Selanjutnya, enkapsulasi adalah gagasan bahwa Anda membuat sedikit portal masuk dan keluar untuk komunikasi dengan sistem lain. Katakanlah Anda membuat API paket untuk digunakan orang lain. Katakanlah Anda memiliki serangkaian informasi dalam sistem API yang diperbarui oleh input pengguna. Anda dapat membuat pengguna API Anda secara langsung memasukkan informasi itu ke dalam array ... menggunakan metode array[key]. OR Anda bisa menggunakan enkapsulasi. Ambil kode yang menambahkannya ke array dan bungkus dalam suatu fungsi (katakanlah, fungsi setArray() atau setWhateverMakesSense()) yang dipanggil pengguna API Anda untuk menambahkan jenis informasi ini. Kemudian, dalam fungsi set ini Anda dapat memeriksa data untuk masalah, Anda dapat menambahkannya ke array dengan cara yang benar, jika Anda memerlukannya Pushed atau shifted ke dalam array dengan cara tertentu ... dll. Anda mengontrol bagaimana input dari pengguna masuk ke program yang sebenarnya. Jadi, dengan sendirinya itu tidak menambah keamanan, tetapi memungkinkan keamanan ditulis oleh Anda, penulis API. Ini juga memungkinkan untuk versi yang lebih baik/pembaruan karena pengguna API Anda tidak perlu menulis ulang kode jika Anda memutuskan untuk membuat perubahan internal. Tapi ini melekat pada good OOP bagaimanapun.

Dalam kasus di sini javascript dan objek localStorage, mereka telah menulis API ini, mereka adalah pembuatnya, dan kami adalah penggunanya. Jika penulis memutuskan untuk mengubah cara kerja localStorage, maka kemungkinan besar harus menulis ulang kode Anda jika metode enkapsulasi digunakan. Tetapi kita semua tahu sangat tidak mungkin bahwa tingkat perubahan ini akan terjadi, setidaknya tidak dalam waktu dekat. Dan karena penulis tidak memiliki pemeriksaan keamanan inheren berbeda untuk dibuat di sini, maka, saat ini, kedua cara menggunakan localStorage pada dasarnya sama. Ini seperti shim. Namun, kita dapat dengan mudah membuat enkapsulasi kita sendiri untuk menimpa/mengganti enkapsulasi yang ada di sekitar localStorage untuk melakukan pemeriksaan keamanan kita sendiri.

PT

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

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:

localStorage.setItem("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():

localStorage.getItem("key")

Outputnya akan seperti berikut:

Jika kalian ingin menghapus suatu Data pada Local Storage, kalian dapat menggunakan metode removeItem():

localStorage.removeItem("key")

Terakhir. Jika kalian ingin menghapus semua/seluruh data pada Local Storage, kalian dapat menggunakan metode clear():

localStorage.clear()

Mudah bukan? Mari kita lanjutkan.

Membuat Halaman Front-End

Pertama-tama, kita harus membuat halaman dengan HTML yang diberi nama index.html. Disini, saya juga menggunakan Bootstrap 5 Alpha sebagai CSS Framework-nya. Berikut adalah contoh kode dari index.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:
  
  

    

      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:

  
  
  

  


  

  

    

      


        
        

          

            
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?