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

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

Третий пример демонстрирует последовательную запись в долговременное хранилище набора элементов, вводимых пользователем, и извлечение элементов из хранилища путем прохода по данным хранилища в цикле. Содержание вводимых элементов произвольное, например, вот такое:

Имя студента Его рост
Валентин 180
Иван 184
Татьяна 150
Михаил 175
Виктор 179

Планируемый вид эмулятора мобильного устройства для данного примера (к сожалению, русификация не поддерживается):


Рис. 17.3.

Для реализации этого примера достаточно одного 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(). Таким образом, она выводит список элементов из хранилища на экран сразу же, как только запускается приложение:


Рис. 17.4.

Удаление данных

Элементы в хранилище можно создавать, считывать и, разумеется, удалять. Для выполнения последней задачи предназначены два метода - 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].

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

Каким образом можно создать точку останова? Например, если в Лекции 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);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?