Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 10:

Работа с локальными данными, хранящимися в памяти мобильного устройства

Второй пример, содержащий средства рассматриваемого 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 - приложения (кадры соответствуют нажатиям на кнопки "Сохранить", "Найти", "Очистить форму"):

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?