В этой статье я рассмотрю две новые возможности HTML5: contenteditable и localStorage. Прочитав спецификации HTML5 и W3C, мне не терпелось написать примеры для той же программы, чтобы продемонстрировать эти новые возможности.
Пока вы смотрели примеры HTML 5, которые я написал ранее, я думал о создании простого, но применимого примера для более нового применения этих новых функций HTML5. Моя цель — не просто продемонстрировать эти API HTML 5, а использовать примеры, чтобы показать разработчикам, как на самом деле реализовать эти API практичным и инновационным способом.
В середине 1990-х я зарегистрировал патент на программу, который представлял собой «ВЕБ-заметку». Проще говоря, он может создать «желтую заметку», которая прикрепится к вашей веб-странице, точно так же, как эффект, который вы приклеиваете к монитору своего компьютера в реальной жизни. Возможность редактирования контента HTML5 и возможности локального хранения позволяют быстро и легко создавать веб-заметки!
Демонстрация использования программы:
С помощью мыши щелкните область стикера и введите информацию. Эта программа будет хранить всю введенную вами информацию в локальном хранилище (а не в файлах cookie). Когда вы повторно посетите эту страницу, ваша информация запомнит то, что вы написали в прошлый раз. Имейте в виду, что ни один браузер не поддерживает HTML5 в полной мере. Этот пример необходимо запускать в браузере, поддерживающем HTML5, например Firefox 3.5 или более поздней версии.
Ключевые методы реализации localStorage просты, например:
функция storeUserScribble (id) {
вар scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}
функция getUserScribble(){
если (localStorage.getItem('userScribble')){
var scribble = localStorage.getItem('userScribble');
}
еще {
var scribble = ' < цвет шрифта = blue face = «Женева, Arial» размер = 6 >< i > Вы можете написать на этой стикере все, что захотите... и вы увидите, что я запомню это в следующий раз, когда вы посетите мой блог. информация, которую вы ввели! < / / i& gt; < / шрифт > ';
}
document.getElementById('scribble').innerHTML = scribble;
}
Я решил поместить свой редактируемый атрибут контента и событие onkeyup в <td>:
| < td background =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” >/ td > |
Полный HTML-код примера можно скачать здесь.
В этом примере размер стикеров можно изменить. Создайте небольшую заметку и поместите ее на свою веб-страницу, которая добавит интересную функцию вашему веб-сайту или веб-приложению.
Источник на английском языке: HTML5 — пример кода ContentEditable и LocalStorage — создайте веб-заметку!