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

Средства сохранения данных в памяти мобильного устройства. API Web Storage: медоды и свойства

При разработке гибридных приложений для мобильных устройств очень важную роль играет организация данных на их клиентской и серверной частях, обеспечение доступа к данным, а также организация обмена данными между клиентским приложением и сервером. Если разработка ведется на базе HTML5, то клиентская часть представляется приложением Cordova. Приложение Cordova - это .xap файл (по сути дела тот же zip архив, содержащий все ресурсы и сборки приложения). Серверная часть для мобильной платформы Windows Phone обычно представляется веб-приложением ASP.NET, которое обеспечивает доступ к данным большого объема.

В этой лекции мы рассмотрим средства хранения локальных данных на стороне клиента, непосредственно в памяти мобильного устройства (в .xap-файле Cardova - приложения) и возможности доступа к этим данным. Такие возможности появилась, прежде всего, благодаря новой спецификации HTML5 - API Web Storage (веб-хранилище) [1-3]. Ориентируясь на особенности мобильных устройств, появление облачных вычислений и необходимость стандартизировать технологии и инновации, внедряемые в течение многих лет посредством встраиваемых модулей, разработчики HTML5 объединили в этой спецификации всю функциональность, позволяющую выполнять полноценные клиентские приложения даже в отсутствие сетевого подключения. API Web Storage позволяет записывать данные в память мобильного устройства и обращаться к ним так же, как это делается в настольных приложениях. Процессы сохранения и извлечения данных, поддерживаемые этим API, применимы в двух ситуациях: когда информация должна быть доступна только в течение работы приложения и когда ее необходимо сохранить надолго - до тех пор, пока пользователь сам не удалит ее. Таким образом, для облегчения и упрощения жизни разработчиков этот API разделили на две части - sessionStorage и localstorage:

• sessionStorage. Это механизм хранения, удерживающий данные только на протяжении работы приложения.
• localStorage. Этот механизм работает аналогично системам хранения для настольных приложений. Данные записываются навсегда, и приложение, сохранившее их, может обращаться к этой информации в любой момент.

Оба механизма (соответствующую им память называют контейнерами localStorage и sessionStorage) работают через один и тот же интерфейс и предлагают одинаковые методы и свойства. Кроме того, оба механизма завязаны на источник, то есть любая информация в хранилище доступна только через приложение, которым она была создана. Рассмотрим спецификацию API sessionStorage и localStorage, позволяющую манипулировать данными:

• setItem (ключ, значение) - этот метод добавляет в контейнер элемент данных с указанным ключом и значением. Элементы записываются в хранилище последовательно, и им автоматически присваиваются порядковые номера (числовые индексы), начиная с 0.
• getItem (ключ) - метод возвращает из контейнера для хранения элемент данных, соответствующий указанному ключу.
• key (индекс) - функция возвращает ключ элемента данных с указанным числовым индексом. С помощью данного метода можно извлечь определенный элемент или даже всю информацию, содержащуюся в хранилище, если пройтись по нему в цикле.
• removeItem (ключ) - метод удаляет из контейнера для хранения элемент данных с указанным ключом. Для идентификации элемента методу нужно передать ключевое слово, которое использовалось в методе setItem() при создании элемента.
• clear() - метод очищает текущий контейнер, то есть удаляет из него все данные.
• length - свойство указывает, сколько элементов данных находится в контейнере. Оно работает точно так же, как обычное свойство length для массивов из JavaScript, и его удобно использовать для по-следовательного считывания элементов.

В этом API существует четкое разграничение временных и постоянных данных, благодаря чему становится намного проще конструировать как небольшие приложения, требующие временного хранения всего нескольких строк (например, содержимого корзины в интернет - магазине), так и объемные и сложные приложения, в которых нередко возникает необходимость сохранять на неопределенное время целые документы.

В настоящее время в Cordova - приложениях выделяется для хранилищ до 5 Мбайт (данный размер обязательно будет расти по мере совершенствования мобильных устройств). Этого более чем достаточно для большинства создаваемых приложений. Однако будьте готовы к тому, что вам придется распознавать и обрабатывать ошибки, если вы будете пытаться записывать больше данных, чем позволяет ваше мобильное устройство.

Контейнеры localStorage и sessionStorage реализованы по принципу синхронного выполнения, что упрощает их использование, однако может привести к снижению производительности. Будьте очень аккуратны, применяя данные из этих API в коде, где важны показатели производительности.

Проверка памяти. Сохранение и извлечение данных по ключу

Если нужно проверить, поддерживает ли мобильное устройство эти API, следует воспользоваться следующей командой JavaScript:

if (window['localStorage'] !== null) ...

Данные, сохраняемые в этих контейнерах, должны относиться к строковому типу. Если возникнет задача записать в хранилище сложные объекты, то одним из вариантов решения может стать их сериализация в JSON с помощью функции JSON.stringify().

Для того, чтобы сохранить данные на время работы приложения, используется sessionStorage, например, такого содержания:

var user_id = "A1B2C3D";
var user_data = {
        vid: "Кошка", name: "Мурка", color: "Черная"
    };
    sessionStorage.setItem(user_id, JSON.stringify(user_data));

Для извлечения данных из контейнера хранилища используется код, подобный этому:

var user_id = " A1B2C3D";
    var user_data = {/*defaults */ };
    if (sessionStorage.getItem(user_id)) {
        user_data = JSON.parse(sessionStorage.getItem(user_id));
    };
    var rezult = user_data.vid + "  " + user_data.name + "  " + user_data.color;

Примеры использования API в Cordova - приложениях

Далее приводится первый пример страницы Cordova - приложения, содержащей обращения к трем JavaScript - функциям, использующим API для контейнера долговременного хранения localStorage. Назначение используемых в примере функций:

• support_stor() - проверяет наличие контейнера в мобильном устройстве;
• save_stor() - сохраняет в контейнере надолго одну запись;
• load_stor() - читает запись из контейнера.

Разметка страницы включает подключение к содержащему используемые функции файлу "js/my_API.js":

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
    minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="js/my_API.js"></script>
    <title>Память</title>
    <style>
      h3 {font-family: Verdana, Arial, Helvetica, sans-serif;}
    </style>
    </head>
  <body>
    <h3>Работаем с локальной памятью мобильного устройства</h3><br />
       <input type ="button" id ="btn_sup" value="ПРОВЕРИТЬ ПАМЯТЬ" onclick = "support_stor();" /><br />
      <input type ="button" id ="btn_save" value="СОХРАНИТЬ    ПОЛЯ" onclick = "save_stor();" /><br />
      <input type ="button" id ="btn_load" value="ПРОЧИТАТЬ    ПОЛЯ" onclick = "load_stor();" /><br /><br />
      Результаты из локальной памяти:
    <br /><p id ="rezult">Здесь будет результат!</p>
  </body>
</html>

Содержимое подключаемого файла "js/my_API.js":

function support_stor() {
    if (window['localStorage'] !== null)
    { document.getElementById("rezult").innerHTML = "Сохраню надолго!"; }
    else { document.getElementById("rezult").innerHTML = "НЕ сохраню!"; }
};

function save_stor() {
    var user_id = "1";
    var user_data = {
        vid: "Тигр", name: "Шархан", color: "Рыжий"
    };
    localStorage.setItem(user_id, JSON.stringify(user_data));
    document.getElementById("rezult").innerHTML = "Поля сохранены надолго!";
};

function load_stor() {
    var user_id = "1";
    var user_data = {/*defaults */ };
    if (localStorage.getItem(user_id)) {
        user_data = JSON.parse(localStorage.getItem(user_id));
    };
    document.getElementById("rezult").innerHTML = 
    user_data.vid + "  " + user_data.name + "  " + user_data.color;
};

Результаты тестирования данной программы, использующей спецификацию API localStorage:

увеличить изображение
Рис. 17.1.