Pada artikel ini saya akan membahas dua fitur baru di HTML5: contenteditable dan localStorage. Setelah saya membaca spesifikasi HTML5 dan W3C, saya tidak sabar untuk menulis contoh pada program yang sama untuk mendemonstrasikan fitur-fitur baru ini.
Saat Anda melihat contoh HTML 5 yang saya tulis sebelumnya, saya berpikir untuk membuat contoh sederhana namun dapat diterapkan untuk menggunakan fitur HTML5 baru ini dengan cara yang lebih baru. Tujuan saya bukan sekadar mendemonstrasikan API HTML 5 ini, namun menggunakan contoh untuk menunjukkan kepada pengembang bagaimana menerapkan API ini dengan cara yang praktis dan inovatif.
Pada pertengahan 1990-an, saya mendaftarkan paten perangkat lunak, yaitu "catatan tempel WEB". Untuk menggambarkannya dalam istilah paling sederhana, ini dapat membuat "catatan tempel kuning" yang menempel pada halaman web Anda, seperti efek yang Anda tempelkan pada monitor komputer di kehidupan nyata. Kemampuan mengedit konten HTML5 dan kemampuan penyimpanan lokal membuat pembuatan catatan tempel web menjadi cepat dan mudah!
Demonstrasi cara menggunakan program:
Gunakan mouse untuk mengklik area catatan tempel dan ketik informasinya. Program ini akan menyimpan semua informasi yang Anda ketik di penyimpanan lokal (bukan di cookie). Saat Anda mengunjungi kembali halaman ini, informasi post-it Anda akan mengingat apa yang Anda tulis terakhir kali. Harap diingat bahwa tidak ada browser yang sepenuhnya mengimplementasikan HTML5. Contoh ini harus dijalankan pada browser yang mendukung HTML5, seperti Firefox 3.5 atau lebih tinggi.
Metode utama untuk mengimplementasikan localStorage sederhana saja, seperti ini:
fungsi penyimpananUserScribble(id){
var coretan = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',coretan);
}
fungsi getUserScribble(){
if (localStorage.getItem('userScribble')){
var coretan = localStorage.getItem('userScribble');
}
kalau tidak {
var coretan = ' < warna font = wajah biru = ”Jenewa, Arial” size = 6 >< i > Anda dapat menulis apa pun yang Anda inginkan pada catatan tempel ini...dan Anda akan melihat saya mengingatnya saat Anda mengunjungi blog saya lagi. informasi yang Anda masukkan! < / / saya& gt; < / font > ';
}
document.getElementById('coretan').innerHTML = coretan;
}
Saya memilih untuk menempatkan atribut konten yang dapat diedit dan acara onkeyup di
| < td background =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” > td > |
Kode HTML lengkap pada contoh dapat diunduh di sini.
Dalam contoh ini, catatan tempel dapat diubah ukurannya. Buat catatan tempel kecil dan letakkan di halaman web Anda, yang menambahkan fitur menarik ke situs web atau aplikasi web Anda.
Sumber bahasa Inggris: HTML5 - contoh kode ContentEditable dan LocalStorage - buat catatan tempel web!