Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Работа с локальными данными, хранящимися в памяти мобильного устройства
Второй пример, содержащий средства рассматриваемого API в Cordova - приложении. В нем также используется контейнер localStorage для сохранения данных (имя пользователя, его хобби, страна проживания). Но в отличие от первого примера, данные в нем вводятся с виртуальной клавиатуры мобильного устройства и путем установки значений в переключателях. Разметка страницы, содержащей тег <form> для общения с пользователем, имеет вид:
<html lang="ru"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="css/my.css" /> <script type="text/javascript" src="js/my_API.js"></script> <title>Долговременное хранение</title> </head> <body> <article> <header> <h3>Учет увлечений</h3> </header> <section> <form name="interest"> Имя <input name=userName placeholder="Введите имя"> <br> <div id="hobbyTable"> <section id="getHobby"> <fieldset> <legend>Любимое увлечение?</legend> <label> <input type=radio name=hobby value="Чтение"> Чтение</label> <br> <label> <input type=radio name=hobby value="Путешествия"> Путешествия</label> <br> <label> <input type=radio name=hobby value="Театр"> Театр </label> <br> <label> <input type=radio name=hobby value="Балет"> Балет</label> <br> <label> <input type=radio name=hobby value="Ралли внедорожников"> Ралли внедорожников</label> <br> </fieldset> </section> </div><br> Страна проживания <br><input type=text name=resState placeholder="Страна проживания"> <br> <input type=button onClick="StorageMaster.setRegistration()" value="Сохранить"> <input type=button onClick="StorageMaster.getReg()" value="Найти"> <br> <input type=button onClick="StorageMaster.clearReg()" value="Очистить форму"> </form> </section> <br> <pre id="profile"></pre> </article> </body> </html>
Таблица стилей данной страницы (файл "css/my.css" ):
body{ background-color:#F2EBC7; color:#962D3E; font-family:Verdana, Geneva, sans-serif; font-size:6px; } h3 { color:#979C9C; font-size:8px; } fieldset { color:#348899; } #hobbyTable { display:table; } #getHobby { display:table-cell; width:155px; } #profile { display:table-cell; background-color: #979C9C; padding: 3px; width:150px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; }
Функции, добавленные в файл "js/my_API.js", содержащие методы объекта StorageMaster для работы с локальным контейнером:
StorageMaster = new Object(); //Сохраняем в контейнере данные формы interest StorageMaster.setRegistration = function () { this.hobbyNow = ""; this.topCount = document.interest.elements.length; for (var count = 0; count < this.topCount; count++) { if (document.interest.elements[count].checked) { this.hobbyNow = document.interest.hobby[count - 2].value; } } localStorage.setItem("uName", document.interest.userName.value); localStorage.setItem("uHobby", this.hobbyNow); localStorage.setItem("uState", document.interest.resState.value); } //Получаем значения из контейнера StorageMaster.getReg = function () { userProfile = "Данные о пользователе:\n"; nameNow = localStorage.getItem("uName") + "\n"; hobbyNow = localStorage.getItem("uHobby") + "\n"; stateNow = localStorage.getItem("uState") + "\n"; fileLength = localStorage.length + " записи о пользователе"; this.profile = userProfile + nameNow + hobbyNow + stateNow + fileLength; document.getElementById("profile").innerHTML = this.profile; } //Очищаем локальное хранилище StorageMaster.clearReg = function () { localStorage.clear(); alert("Локальное хранилище очищено"); }
Одной из особенностей данного примера является использование переключателей для передачи данных на хранение. Переключатели играют важную роль в мобильных устройствах, упрощая задачу выбора пользователем нужных вариантов.
Результат сохранения данных, выбранных и введенных пользователем во время работы Cordova - приложения (кадры соответствуют нажатиям на кнопки "Сохранить", "Найти", "Очистить форму"):