Kita mungkin pernah merasakan mengisi sebuah form di browser, tetapi saat kita klik kirim koneksi internet putus dan ada pesan error. Kita kemudian mengklik back dan terpaksa harus mengisi form tersebut. Jika form yang kita isikan sedikit tentu tidak apa-apa, tetapi kalau data yang kita isikan banyak maka tentu akan membuat kita kesal.
Sebagai pengembang aplikasi berbasis web kita tentu ingin membantu menyelesaikan masalah ini. Kita mungkin berpikir akan menyimpan data di browser, dan untunglah ada semacam storage dalam browser kita sehingga kita dapat mengambil data ini bila diperlukan.
Pada contoh kali ini kita akan membuat form dengan tampilan seperti berikut ini:
Source code untuk form misalnya seperti berikut ini:
<form method=”POST” action=”storage_hasil.php” id=”formku”>
Nama: <input type=text id=”nama”>
<br/>HP: <input type=text id=”hp”>
<br/>Pesan: <textarea id=”pesan” cols=50></textarea>
<br/>
<button type=”button” onClick=”kirim()”>Kirim</button>
<button type=”button” onClick=”ambiltmp()”>Ambil Tmp Data </button>
</form>
Kita ingin pada saat tekan tombol kirim data akan tersimpan juga di browser:
function kirim()
{
sessionStorage.nama=$(‘#nama’).val();
sessionStorage.hp=$(‘#hp’).val();
sessionStorage.pesan=$(‘#pesan’).val();
$(‘#formku’).submit();
}
Kemudian anda kita jalankan dan koneksi internet putus maka tampilan akan seperti ini
Jika kita klik back maka form akan kosong, untuk itu kita mengklik tombol ‘Ambil Tmp Data’ yang isi functionnya:
function ambiltmp()
{
$(‘#nama’).val(sessionStorage.nama);
$(‘#hp’).val(sessionStorage.hp);
$(‘#pesan’).val(sessionStorage.pesan);
}
Jika kita klik ‘Ambil Tmp Data’ maka tampilan akan seperti semula seperti gambar di bawah ini:
Dengan demikian kita dapat membuat form yang datanya dapat diambil kembali jika saat submit ada kendala jaringan internet.
Demo dapat dilihat di http://aris.proweb.asia/storage.php dengan source code seperti berikut ini:
<?php
session_start();
?>
<html>
<head>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script>
function kirim()
{
sessionStorage.nama=$(‘#nama’).val();
sessionStorage.hp=$(‘#hp’).val();
sessionStorage.pesan=$(‘#pesan’).val();
$(‘#formku’).submit();
}
function ambiltmp()
{
$(‘#nama’).val(sessionStorage.nama);
$(‘#hp’).val(sessionStorage.hp);
$(‘#pesan’).val(sessionStorage.pesan);
}
</script>
</head>
<body>
<form method=”POST” action=”storage_hasil.php” id=”formku”>
Nama: <input type=text id=”nama”>
<br/>HP: <input type=text id=”hp”>
<br/>Pesan: <textarea id=”pesan” cols=50></textarea>
<br/>
<button type=”button” onClick=”kirim()”>Kirim</button>
<button type=”button” onClick=”ambiltmp()”>Ambil Tmp Data </button>
</form>
</body>
</html>
Informasi lebih lanjut silahkan mengunjungi http://www.w3schools.com/html/html5_webstorage.asp .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.