Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Работа с локальными данными, хранящимися в памяти мобильного устройства
Третий пример демонстрирует последовательную запись в долговременное хранилище набора элементов, вводимых пользователем, и извлечение элементов из хранилища путем прохода по данным хранилища в цикле. Содержание вводимых элементов произвольное, например, вот такое:
Планируемый вид эмулятора мобильного устройства для данного примера (к сожалению, русификация не поддерживается):
Для реализации этого примера достаточно одного 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].