Wajah menggunakan javascript penyimpanan lokal w3schools

Pembahasan mengenai pembelajaran Javascript kali ini sampai ke local storage pada Javascript. Di sini kita dapat menyimpan data-data pada broswer yang kita pakai. Salah satu penggunaan praktis adalah penampungan sementara aplikasi web kita sebelum dikirimkan ke server. Bisa juga untuk menampung isi form yang gagal di submit saat internet putus, dan pada saat dilakukan submit ulang data bisa diambil kembali

Kita akan menggunakan object localStorage yang merupakan bagian dari object window seperti gambar di bawah ini

Kita akan membahas mengisi penyimpanan dengan setItem dan membaca penyimpanan dengan getItem

Untuk mengisi storage kita dapat menggunakan setItem dengan cara seperti berikut ini

1. Source code HTML yang akan kita pakai adalah seperti berikut
   

   Isikan nama anda:
   Isikan

2. Untuk kode sumber yang memasukkan data ke penyimpanan lokal adalah seperti berikut

   	document.querySelector('#isikan').addEventListener('click',function(e)
   	{		
   		let nama = document.querySelector('#nama');
   		localStorage.setItem('nama',nama.value);
   	});
   

3. Demo dapat dilihat di https. // js. aris. proweb. asia/3-12-1-set-item. html dengan tampilan seperti berikut ini
   
   
   Terlihat kita memasukkan data dan masuk ke storage yang ada di browser kita. Data ini tetap ada meskipun kita mematikan komputer dan menghidupkan kembali

Selanjutnya kita akan membaca data dari local storage ini

1. Source code HTML adalah seperti berikut ini
   

   Ambil nama



Nama:
2. Source code Javascript adalah seperti berikut ini

   	document.querySelector('#ambil').addEventListener('click',function(e)
   	{		
   		let nama = localStorage.getItem('nama');
   		document.querySelector('#nama').innerHTML = nama;
   	});
   

3. Demo dapat dilihat di https. // js. aris. proweb. asia/3-12-2-get-item. html dengan tampilan seperti berikut ini
   

Informasi lebih lanjut silahkan kunjungi https. // www. w3schools. com/jsref/prop_win_localstorage. asp

Setelah kita mempelajari mengenai memasukkan data tunggal ke browser dengan Javascript maka kita akan melanjutkan ke pembelajaran berikutnya yaitu dengan menyimpan dan membaca data array ke localStorage. Kita akan menggunakan JSON dalam menangani pembacaan dan penyimpanan data ke localStorage ini. Pada saat menyimpan kita akan mengubah data array ke JSON dengan function JSON. merangkai. Kemudian untuk membaca dari localStorage kita akan menggunakan JSON. parse untuk mengubah dari JSON ke array. Kita akan membahas mengenai menyimpan dengan array pada localStoerage dengan bantuan JSON. stringify kemudian kita akan mengambil datanya kembali dari localStorage ke Javascript dengan JSON. mengurai

Memasukkan ke localStorage

1. Kode sumber HTML
   

   Isikan nama siswa: Isikan
   
   

2. Kode sumber Javascript

   	document.querySelector('#isikan').addEventListener('click',function(e)
   	{	
   		let siswa_baru = document.querySelector('#nama');
   		
   		let daftar_nama;
   		if (localStorage.getItem('daftar_nama')===null)
   		{
   			daftar_nama = [];
   		}
   		else
   		{
   			daftar_nama = JSON.parse(localStorage.getItem('daftar_nama'));	
   		}
   		
   		daftar_nama.push(siswa_baru.value);	
   		localStorage.setItem('daftar_nama',JSON.stringify(daftar_nama));
   		
   		let pesan = document.querySelector('#pesan');		
   		pesan.innerHTML = siswa_baru.value + " berhasil disimpan";
   	});
   
   

3. Demo mengatakan https. // js. aris. proweb. asia/3-12_3-set-item-json. html dengan tampilan seperti berikut ini
   

Membaca localStorage ke array Javascript

1. Kode sumber HTML
   

   Ambil nama

   Daftar nama
   

2. Kode sumber Javascript

   	document.querySelector('#ambil').addEventListener('click',function(e)
   	{		
   		let tampilan = document.querySelector('ul#tampilan');
   	
   		daftar_nama = JSON.parse(localStorage.getItem('daftar_nama'));
   		daftar_nama.forEach(function(nama){
   			let myli = document.createElement('li');
   			//console.log(nama);
   			myli.innerHTML = nama;
   			tampilan.appendChild(myli);
   		});
   		
   	});
   

3. Demo mengatakan https. // js. aris. proweb. asia/3-12_4-get-item-json. html dengan tampilan seperti berikut ini
   

Informasi lebih lanjut silahkan kunjungi
1. https. // www. w3schools. com/js/js_json_stringify. asp
2. https. // www. w3schools. com/js/js_json_parse. asp
3. https. // www. tutorialspoint. com/Bagaimana-bisa-menghapus-semua-elemen-anak-anak-of-a-DOM-node-in-JavaScript

kunjungi www. proweb. bersama. id untuk menambah wawasan anda

Penyimpanan lokal dengan JSON untuk Javascript

Apa penyimpanan lokal Anda di JavaScript?

Apa yang dimaksud dengan Penyimpanan Web?

Apa perbedaan antara localStorage dan Sessionstorage?