|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 339 / 30 | Длительность: 11:36:00
Специальности: Программист
Лекция 10:
Работа с локальными данными, хранящимися в памяти мобильного устройства
Третий пример демонстрирует последовательную запись в долговременное хранилище набора элементов, вводимых пользователем, и извлечение элементов из хранилища путем прохода по данным хранилища в цикле. Содержание вводимых элементов произвольное, например, вот такое:
Планируемый вид эмулятора мобильного устройства для данного примера (к сожалению, русификация не поддерживается):
Для реализации этого примера достаточно одного HTML - документа, содержащего простую форму:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Веб-хранилище базы данных</title>
<link rel="stylesheet" href="css/storage.css">
<script type="text/javascript" src="js/storage.js"></script>
</head>
<body>
<section id="formbox">
<form name="form">
<p>Ключевое слово (имя):</p>
<p><input type="text" name="keyword" id="keyword"></p>
<p>Значение (рост,см):<br /><input type ="text" name="text" id="text" ></p>
<p><input type ="button" id ="button" name ="button" value="СОХРАНИТЬ"/></p><br />
</form>
<section id = "databox"> Информация недоступна </section> <br />
</section>
</body>
</html>Подключаемый файл "css/storage.css" содержит простой набор правил для оформления страницы, благодаря которым поля для отображения данных будут визуально выделяться:
#formbox{ float: left;
padding: 20px;
border: 1px solid #999999;
}
#databox{
float: left;
width: 400px;
margin-left: 20px;
padding: 20px;
border: 1px solid #999999;
}
#keyword, #text{
width: 200px; }Приведенный далее JavaScript - код из файла "js/storage.js"использует методы key, setItem, getItem объекта localStorage, а также методы addEventListener для прослушивания двух событий - события click от объекта button (кнопка на форме) и события load (загрузка страницы) от объекта window:
function initiate(){
var button = document.getElementById('button');
button.addEventListener('click', newitem, false);
show();
}
function newitem(){
var keyword=document.getElementById('keyword').value;
var value = document.getElementById('text').value;
localStorage.setItem(keyword,value);
show();
document.getElementById('keyword').value='';
document.getElementById('text').value='';
}
function show() {
var databox = document.getElementById('databox');
databox.innerHTML += 'Содержание хранилища:';
for (var f = 0; f < localStorage.length; f++) {
var keyword = localStorage.key(f);
var value = localStorage.getItem(keyword);
databox.innerHTML += '<div>' + keyword + ' - ' + value + '</div>';
}
}
window.addEventListener('load', initiate, false);В коде данного листинга функция newitem() выполняется каждый раз, когда пользователь щелкает на кнопке формы. Эта функция создает элемент и добавляет в него информацию, полученную из полей ввода формы, а затем вызывает функцию show(). Функция show(), в свою очередь, извлекает каждый элемент из хранилища по ключевому слову, используя метод getItem(keyword), а затем выводит его содержимое на экран мобильного устройства. Чтобы вывести полный список элементов из хранилища, в цикле for функции show() применяются свойство length и метод key(). Цикл for начинается с 0 и завершается порядковым номером последнего элемента из хранилища. Внутри цикла с помощью метода key() извлекается ключевое слово для каждой позиции. Например, если в позиции 0 пространства хранилища находится элемент с ключевым словом "Валентин", то код localStorage.key(0) возвращает значение "Валентин". Вызывая этот метод в цикле, мы проходим по всему списку и выводим на экран ключевые слова и значения всех элементов из хранилища. Функцию show() мы вызываем из функции initiate(). Таким образом, она выводит список элементов из хранилища на экран сразу же, как только запускается приложение:
Удаление данных
Элементы в хранилище можно создавать, считывать и, разумеется, удалять. Для выполнения последней задачи предназначены два метода - removeItem(key), который удаляет один элемент, и clear(), удаляющий все находящиеся в хранилище элементы. Чтобы реализовать удаление данных для приведенного выше третьего примера с именами и ростом студентов, в его JavaScript - коде немного изменим функцию show() и добавим две новые функции - remove() и removeAll(), которые соответственно удалят один элемент или выполнят полную очистку хранилища:
function show() {
var databox = document.getElementById('databox');
databox.innerHTML = '<div><button onclick = "removeAll()">
Удалить Bce</button></div>';
databox.innerHTML += 'Содержание хранилища:';
for (var f = 0; f < localStorage.length; f++) {
var keyword = localStorage.key(f);
var value = localStorage.getItem(keyword);
databox.innerHTML += '<div>' + keyword + ' - ' + value
+ '<BR><button onclick = "remove(\'' + keyword + '\') ">
Удaлить</button><br></div>';
}
}
function remove(keyword){
if(confirm('Вы уверены?')){
localStorage.removeItem(keyword); show();
}
}
function removeAll() {
if (confirm('Вы уверены?')) {
localStorage.clear(); show();
}
}Функции initiate() и newitem() в новой версии примера ничем не отличаются от аналогичных функций предыдущего примера кода. Изменилась только функция show(): теперь она включает в себя обработчики события onclick, которые вызывают функции, удаляющие отдельный элемент или все элементы хранилища соответственно. Список элементов строится точно так же, как раньше, но на этот раз к каждому элементу добавляется кнопка "Удалить". Кроме того, вверху списка создается еще одна кнопка, позволяющая полностью очистить хранилище. Скриншоты, приведенные далее, иллюстрируют процесс удаления одного элемента хранилища (ключ = "Vladimir").
Используя код последнего примера данной лекции, можно протестировать обработку информации объектом sessionStorage. Для этого следует в JavaScript - коде всех функций заменить объект localStorage на sessionStorage. После выхода из приложения и повторного запуска содержимое экранов будет различаться: в случае localStorage сохранятся созданные вами элементы, а пространство хранилища для sessionStorage будет пустым. В отличие от других систем (таких, как файлы cookie), при использовании объекта sessionStorage хранимая информация никогда не выходит за пределы одного запуска приложения.
Подробнее об API хранилищ HTML5 рассказывается на сайте [4].
Дмитрий Белов