Dalam artikel ini saya akan melihat 2 fitur baru di HTML5: ContentEditable dan LocalStorage. Setelah saya membaca deskripsi spesifikasi HTML5 dan W3C, saya tidak sabar untuk menulis contoh pada program yang sama ini untuk menunjukkan fitur -fitur baru ini.
Ketika Anda melihat contoh HTML 5 yang saya tulis sebelumnya, saya berpikir untuk membuat contoh sederhana namun berlaku untuk mengebor fitur HTML5 baru ini dengan cara yang lebih aneh. Tujuan saya bukan untuk hanya menunjukkan API HTML 5 ini, tetapi menggunakan contoh untuk memberi tahu pengembang bagaimana benar -benar menerapkan API ini dengan cara yang praktis dan inovatif.
Pada pertengahan tahun sembilan puluhan, saya mendaftarkan paten perangkat lunak, yang merupakan "Web Post-It Notes". Untuk menggambarkannya dengan cara yang paling sederhana, ia dapat membuat "catatan kuning-itu" yang menempel pada halaman web Anda, seperti efek Anda tetap pada monitor komputer Anda dalam kehidupan nyata. Fungsi yang dapat diedit konten HTML5 dan fungsi LocalStorage membuat web post-it cepat dan mudah!
Tunjukkan cara menggunakan program ini:
Klik area catatan post-it dengan mouse Anda dan ketik informasi. Program ini akan menyimpan semua informasi yang Anda ketik ke penyimpanan lokal (bukan dalam cookie). Ketika Anda mengunjungi kembali halaman ini, pesan post-it Anda akan mengingat apa yang Anda tulis terakhir kali. Ingatlah bahwa tidak ada browser yang sepenuhnya mengimplementasikan HTML5.
Metode utama untuk mengimplementasikan LocalStorage sederhana, seperti ini:
| function storeusscribble (id) { var scribble = document.geteLementById (& rsquo; Scribble & rsquo;). innerHtml; localstorage.setItem (& rsquo; UserScribble & rsquo;, Scribble); } fungsi getUserscribble () { if (localstorage.getItem (& rsquo; usercribble & rsquo;)) { var scribble = localstorage.getItem (& rsquo; usercribble & rsquo;); } kalau tidak { var scribble = & lsquo; < font color = blue face = & rdquo ; Geneva , Arial & rdquo ; Saya ingat informasi yang Anda masukkan! < / i & gt; </font> & rsquo ;; } document.geteLementById (& rsquo; Scribble & rsquo;). InnerHtml = Scribble; } |
Saya memilih untuk menempatkan properti yang dapat diedit konten saya dan acara OnKeyup di <td>:
| < td latar belakang & rdquo ; & rdquo ; |
Kode HTML lengkap dalam contoh dapat diunduh di sini.
Dalam contoh ini, post-itsable. Buat post-it-it dan letakkan di halaman web Anda, yang menambahkan fitur menarik ke situs web atau aplikasi web Anda.
Sumber Bahasa Inggris: HTML5 - Contoh Kode yang dapat diedit dan LocalStorage - Buat Catatan Sticky Web!