في هذه المقالة سأقوم بفحص ميزتين جديدتين في HTML5: contenteditable وlocalStorage. بعد أن قرأت مواصفات HTML5 وW3C، لم أستطع الانتظار لكتابة أمثلة على نفس البرنامج لتوضيح هذه الميزات الجديدة.
بينما كنت تنظر إلى أمثلة HTML 5 التي كتبتها سابقًا، كنت أفكر في إنشاء مثال بسيط ولكنه قابل للتطبيق لممارسة ميزات HTML5 الجديدة هذه بطريقة أكثر حداثة. هدفي ليس مجرد توضيح واجهات برمجة التطبيقات HTML 5 هذه، ولكن استخدام الأمثلة لتوضيح للمطورين كيفية تنفيذ واجهات برمجة التطبيقات هذه بطريقة عملية ومبتكرة.
في منتصف التسعينيات، قمت بتسجيل براءة اختراع برمجية، والتي كانت عبارة عن "مذكرة لاصقة على الويب". لوصف ذلك بأبسط العبارات، يمكنه إنشاء "ملاحظة لاصقة صفراء" تلتصق بصفحة الويب الخاصة بك، تمامًا مثل التأثير الذي تلصقه على شاشة الكمبيوتر في الحياة الواقعية. إن إمكانية تحرير محتوى HTML5 وإمكانيات التخزين المحلية تجعل إنشاء الملاحظات اللاصقة على الويب أمرًا سريعًا وسهلاً!
شرح لكيفية استخدام البرنامج :
استخدم الماوس للنقر على منطقة الملاحظات اللاصقة واكتب المعلومات. سيقوم هذا البرنامج بتخزين كافة المعلومات التي تكتبها في وحدة التخزين المحلية (وليس في ملفات تعريف الارتباط). عند زيارتك لهذه الصفحة مرة أخرى، ستتذكر معلوماتك اللاحقة ما كتبته في المرة الأخيرة. الرجاء الأخذ في الاعتبار أنه لا يوجد متصفح ينفذ HTML5 بشكل كامل. يجب تشغيل هذا المثال على متصفح يدعم HTML5، مثل Firefox 3.5 أو أعلى.
الطرق الرئيسية لتنفيذ localStorage بسيطة، مثل هذه:
وظيفة storeUserScribble(id){
var scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}
وظيفة getUserScribble(){
إذا (localStorage.getItem('userScribble')){
var scribble = localStorage.getItem('userScribble');
}
آخر {
var scribble = ' < لون الخط = وجه أزرق = ”Geneva, Arial” الحجم = 6 >< i > يمكنك كتابة ما تريد على هذه المذكرة اللاصقة... وسوف تراني أتذكر ذلك في المرة القادمة التي تزور فيها مدونتي المعلومات التي أدخلتها! < / / i & gt ;
}
document.getElementById('خربشة').innerHTML = خربشة;
}
لقد اخترت وضع سمة المحتوى القابلة للتحرير وحدث onkeyup على <td>:
| < خلفية td =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” ></ td > |
يمكن تنزيل كود HTML الكامل في المثال هنا.
في هذا المثال، يمكن تغيير حجم الملاحظات اللاصقة. قم بإنشاء ملاحظة لاصقة صغيرة وضعها على صفحة الويب الخاصة بك، مما يضيف ميزة مثيرة للاهتمام إلى موقع الويب الخاص بك أو تطبيق الويب الخاص بك.
المصدر باللغة الإنجليزية: HTML5 - مثال التعليمات البرمجية لـ ContentEditable وLocalStorage - إنشاء ملاحظة لاصقة على الويب!