Jom Belajar Cara Simpan data dengan HTML !!! (Genius Corner Siri 26)

Tajuk: Simpan data dengan HTML

Genius Corner Siri 26

Oleh: Fariz Gaskin

 

Salam ceria buat semua pembaca budiman. Pada minggu ini, kita akan mempelajari latihan HTML bahagian ketujuh. Kali ini, kita akan belajar menyimpan data secara kekal menggunakan HTML.

 

HTML5 didatangkan dengan fungsi simpanan data kekalnya yang tersendiri, sama seperti sebuah pangkalan data. Melalui fungsi ini, pengaturcara diberi pilihan samada membina laman web bersama pangkalan data, atau tanpanya.

 

Fungsi simpanan data kekal ini memberikan ciri keselamatan yang lebih tinggi kepada sesebuah laman web kerana data yang tersimpan tidak dapat dicapai oleh sesiapa sekalipun. Antara kegunaan simpanan data HTML ini ialah merekodkan tarikh terakhir pengguna mendaftar masuk ke sesebuah laman web seperti Maybank2U.

 

Simpanan data HTML ini terbahagi dua iaitu simpanan kekal localStorage dan simpanan sementara sessionStorage. Kedua-dua fungsi ini tersimpan di dalam enjin carian WebKit. Enjin carian ini digunakan oleh pelayar web Safari dan Chrome.

 

localStorage menyimpan data secara kekal sehingga pengguna melenyapkan sejarah carian atau browsing history. sessionStorage pula menyimpan data hanya semasa pelayar web sedang diguna. Apabila ditutup, segala data yang dipegang oleh sessionStorage akan dilenyapkan secara automatik.

 

Tanpa membuang masa, mari kita mulakan latihan minggu ini.

 

Latihan

 

Langkah 1: Buka mana-mana text editor yang anda miliki seperti Notepad (Windows) atau TextEdit (MacOS) dan tuliskan kod aturcara berikut.

 

<!DOCTYPE html>

<html>

<body>

<div id=”result”></div>

<script>

// Check browser support

if (typeof(Storage) !== “undefined”) {

   // Store

   localStorage.setItem(“myCompany”, “Tracdisk”);

   // Retrieve

   document.getElementById(“result”).innerHTML = localStorage.getItem(“myCompany”);

} else {

   document.getElementById(“result”).innerHTML = “Sorry, your browser does not support Web Storage…”;

}

</script>

</body>

</html>

 

Langkah 2: Save hasil kerja anda tadi dengan nama localstorage.html ke dalam folder Genius Corner seperti latihan terdahulu.

 

Langkah 3: Double-click fail tadi untuk melihat hasilnya melalui pelayar web.

Semakan

 

Di dalam kod aturcara tadi, kita telah menghasilkan sebuah fungsi yang menyimpan data secara kekal menggunakan fungsi utama localStorage dan memaparkannya di dalam laman web HTML.

 

Menggunakan sub-fungsi setItem, kita telah menetapkan pembolehubah baru bernama myCompany dan memberikan nilai Tracdisk kepadanya. Nilai ini kemudian dipapar di dalam elemen <div> menggunakan setItem yang dihantar melalui document.getElementById(“result”).innerHTML.

 

Walau ringkas, asas inilah yang digunakan dalam kebanyakan laman web berkeselamatan tinggi seperti bank atas talian, ecommerce dan sebagainya.

Pelajar SK Bandar Baru Sentul mengikuti bengkel Scratch TMK

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Simpan dua pembolehubah myCompany dan myName.
  2. Papar kedua-dua pembolehubah tadi dalam <div> yang sama.
  3. Papar kedua-dua pembolehubah tadi dalam <div> yang berbeza.

 

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila emelkan kepada farizgaskin@gmail.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

 

Leave a Reply

Your email address will not be published. Required fields are marked *