Logo    
Деловая газета CitCity.ru citforum.ck.ua - все об Open Source Форумы Все публикации Учебный центр Курилка
CitForum    CITForum на CD    Подписка на новости портала Море(!) аналитической информации! :: citforum.ck.ua
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Wednesday, 09-Apr-2008 18:59:56 EEST

Google
WWW citforum.ck.ua
Техническая конференция «Корпоративные базы данных-2008»
Москва, 24-25 апреля
2008 г.

Хранение данных на клиенте. DOM Storage и его аналоги

Илья Кантор

По мере того как web-странички превращаются в AJAX-приложения, им требуются все новые возможности.

Сложные выборки элементов DOM обеспечиваются некоторыми браузерами и почти всеми распространенными Javascript-фреймворками.

Кросс-доменные HTTP-запросы находят поддержку в стандартах и реализуются в новейших браузерах, включая Internet Explorer 8.

В этой статье пойдет речь о средствах для хранения большого количества данных на клиенте, в браузере, которые доступны уже сейчас.

В частности, Internet Explorer 5+, Firefox 2+, Safari 2+ не требуют для этого дополнительных плагинов и Flash.

Зачем нужны дополнительные средства хранения?

Почти во всех браузерах есть поддержка cookies.

На протяжении долгого времени cookies были единственным кросс-браузерным способом сохранить данные, которые будут доступны после перезагрузки страницы.

Однако у cookie есть две важных особенности:

  1. Не более 2 килобайт данных
  2. Данные идут на сервер при каждом HTTP-запросе

Средства хранения на клиенте предусматривают сотни килобайт и мегабайты данных, и не отсылают их на сервер при каждом HTTP-запросе.

А cookie можно продолжать использовать, например, для хранения сессии.

Firefox (Gecko). Стандарт HTML 5.

Firefox реализует стандарт хранения "Client-side session and persistent storage of name/value pairs", предложенный в спецификации HTML 5.

Для постоянного хранения данных в нем используется объект window.globalStorage[домен], операции над которым можно производить точно так же, как над обычным javascript-объектом. При уходе с сайта и даже закрытии браузера globalStorage не меняется, так что все его свойства можно прочитать обратно.

Например:

storage = globalStorage[document.domain]
 
// записать значение
storage['userName'] = 'Vasya'
// прочитать значение
alert(storage['userName'])
// удалить значение

delete storage['userName']
 
// получить все значения
for(var name in storage) {

    alert(name + ':' + storage[name])
}

При чтении/записи на элементе body инициируется всплывающее событие storage.

Поймать его можно, например, таким обработчиком:

window.addEventListener('storage', function(event) { ... })

Стандарт HTML 5 все еще в процессе развития. В старой редакции прочитанные значения имели тип StorageItem.

Версия Firefox 2.0.0.13 возвращает при чтении объект именно этого типа.

Из текущей редакции StorageItem убран. В ней возвращаемые хранилищем значения имеют более простой тип DOMString.

..А пока эти изменения не учтены разработчиками, рекомендуется преобразовать значения к String явным образом.

Например:

var test = "12345"
storage.test = test // сохранить -> String

test = storage.test // прочитать <- StorageItem
 
alert(test.length) // undefined, это же не строка
alert(test.constructor) // StorageItem

test = String(test) // сделали строку. Теперь все ок.
Ограничения

Ограничения на данные: ключи и значения - только строки.

Размер: 5MB на домен.

Ограничения безопасности - точно такие же, как на cookie.
Данные, в globalStorage['site.ru'] можно сохранить только на самом site.ru, а прочитать - на blog.site.ru, но не на otherhost.ru.

Дополнительные материалы
  • Пример DOM Storage.
  • Документация по реализации в Firefox.
  • Интерфейс Storage в стандарте HTML 5.

Internet Explorer. userData.

Internet Explorer 8 реализует DOM Storage, в то время как версии начиная от 5й поддерживают собственный интерфейс: userData behavior.

Он работает посредством выделенного DOM-элемента, которому назначается behavior userData. В этот элемент загружается нужное пространство имен, и данные становятся доступны через атрибуты.

<span id="storageElement"></span>
<script>    
    storage = document.getElementById('storageElement')
    if (!storage.addBehavior) {
        alert("userData not available.")
    } else {
        // поставить userData behavior
        storage.addBehavior("#default#userData")
        // загрузить пространство имен
        storage.load("namespace")    
    }

</script>
После инициализации можно работать с данными. Для записи изменений используется метод save.
function put(key, value) { // записать значение

    storage.setAttribute(key, value)
    storage.save("namespace")
}
 
function get(key) { // получить значение

    return storage.getAttribute(key)
}
 
function remove(key) { // удалить значение

    storage.removeAttribute(key)
    storage.save("namespace")
}

Как это часто бывает с Internet Explorer, некоторые операции делаются неочевидным :) образом.

Так, например, получить все сохраненные данные из storage.attributes нельзя. Там хранятся только атрибуты самого HTML-элемента.

Данные же хранятся в свойстве storage.XMLDocument.documentElement.attributes.

Например, следующий код создает список вида ключ:значение.

var list = []
var attrs = storage.XMLDocument.documentElement.attributes
 
for(var i=0; i<attrs.length; i++) {
    list.push(attrs[i].name+':'+attrs[i].value);
}
Устаревание, атрибут expires

В отличие от DOM Storage, можно задать атрибут expires. Он устанавливается на уровне всего элемента и действует на все хранящиеся данные. Очистка данных происходит при вызове load.

var time = new Date(); // Start Time

time.setMinutes(time.getMinutes() + 1)
storage.expires = time.toUTCString();
Устаревание, атрибут expires

В отличие от DOM Storage, можно задать атрибут expires. Он устанавливается на уровне всего элемента и действует на все хранящиеся данные. Очистка данных происходит при вызове load.

var time = new Date(); // Start Time

time.setMinutes(time.getMinutes() + 1)
storage.expires = time.toUTCString();
Ограничения

Ключи и значения - только строки.

Способ работает при всех уровнях безопасности, кроме "Высокого".
При этом для сайтов в зоне Internet объем ограничен 128K на страницу и 1024K на домен, для локальных и интранет - лимит увеличен.

Ограничения безопасности - та же директория, тот же домен и протокол.

Дополнительные материалы
  • Пример userData behavior.
  • Документация по userData behavior

Safari(WebKit). Database storage.

Дальше всех в поддержке стандарта хранения пошли разработчики WebKit.
В Safari реализовано локальное хранение в базе данных SQLite.

Набор операций включает в себя CREATE TABLE, INSERT, SELECT, REPLACE, индексы и многое другое, с рядом ограничений безопасности (например, нет LOAD DATA INFILE).

В отличие от DOM Storage и userData, этот интерфейс асинхронный. Все функции запросов к базе данных принимают в качестве аргументов две функции: callback - для обработки результатов и errback - для обработки ошибок.

Когда запрос завершается, вызывается один из этих обработчиков.

Продемонстрируем это на тестовой базе.

db = openDatabase("Test", "1.0", "Webkit Storage Example")

 
db.transaction(function(tx) {
  tx.executeSql(
      "CREATE TABLE IF NOT EXISTS test (key TEXT, value TEXT, unique(key))", 
      [], 
      function(tx, result) { alert("Success!") },
      function(tx, error) { alert("Failure: "+error.message }

  )
})

Сложновато с первого взгляда?

db.transaction создает транзакцию и передает ее функции-аргументу.

Код внутри function(tx) выполняется в одной транзакции.

Вызов tx.executeSql принимает аргументы:

  1. Запрос
  2. Аргументы подстановки
  3. Обработчик результата
  4. Обработчик ошибки

Следующий пример демонстрирует обработку запроса.

db.transaction(function(tx) {
  tx.executeSql("SELECT value FROM test WHERE key=?", [key],
    function(tx,result) {

      alert("Количество результатов: "+result.rows.length)
      alert("Поле value первого результата: "+ result.rows.item(0).value)

   },
   function(tx, error) { alert("Error!") }
  )
})
Ограничения

Стандарт SQL-хранения также включает в себя поддержку версий схемы, указание размера базы данных в openDatabase и многое другое. Может существовать только одна версия схемы одновременно.

База существует только в рамках домена(полного домена, origin), на котором была создана. Поддомен не имеет доступа к базе домена.

Дополнительные материалы
  • Пример database Storage для хранения пар ключ-значение
  • Более сложный пример

На момент написания статьи разработчики WebKit планировали поддержку DOM Storage, но в nightly build ее не было.

Opera

На момент написания статьи Opera 9.5 (beta) не поддерживает ни DOM Storage ни Database Storage.

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

Flash. SharedObject.

Там, где нет DOM Storage, для offline-хранения используют flash-интерфейс SharedObject. Он позволяет хранить самые разные объекты средствами Adobe Flash.

Пример ActionScript для работы с SharedObject:

// создать/получить namespace storage
storage = SharedObject.getLocal("storage"); 
 
// записать данные name => Вася

storage.data.name="Вася";
 
// сохранить объект
storage.flush()
 
// перечислить свойства объекта
for (var name in storage.data) {

    trace(name + ":" + storage.data[name])
}

Чтобы работать с этим хранилищем из javascript, нужен способ коммуникации JS <->Flash.

В старых версиях Flash вызвать javascript можно через getURL('javascript:...').

Передать значение во Flash можно установкой переменной flash-объекту. Эту переменную flash-ролик может считывать каждый кадр и предпринимать соответствующие действия.

Во Flash 8+ появился интерфейс ExternalInterface, который позволяет как указывать AS-функцию для приема данных из JS, так и напрямую вызывать JS-метод.

Открыть рабочий пример передачи значения Flash <-> JS.

Код примера в ActionScript:

import flash.external.*;
 
// установить местную функцию recieveFromJS для приема данных

// от javascript-функции sendFromJS
ExternalInterface.addCallback("sendFromJS", null, recieveFromJS);
 
// Эта функция будет реагировать на sendFromJS
function recieveFromJS(text) {

    _root.theText.text = text; // .. и устанавливать текст в окошке
}
 
// Это действие, наоборот, отправляет данные в JS.
_root.button.onRelease = function() {

    // вызвать javascript-функцию recieveFromFlash
    ExternalInterface.call("recieveFromFlash", _root.theText.text);
    _root.theText.text = "";

}

Код примера в JS:

function recieveFromFlash(Txt) {

    document.getElementById('text').value = Txt;
}
 
function sendFromJS() {
    var value = document.getElementById('text').value

 
    var movie = (navigator.appName.indexOf("Microsoft")!=-1 ? window : document)["BridgeMovie"]    
 

    movie.sendFromJS(value);    
 
    document.getElementById('text').value = ''
}
Скачать исходники
Документация на ExternalInterface
Особенности и ограничения

Доступ к SharedObject ограничен роликами с того же домена.

Это принципиально отличается от Javascript, в котором доступ определяется адресом страницы а не скрипта, и делает возможным разного рода кросс-доменные трюки.

Ограничение по умолчанию на размер данных - в районе 100Kb, пользователь может уменьшить или увеличить его в специальном Flash-интерфейсе, который открывается при вызове ActionScript:

System.showSettings(1);
Проблемы реализации

Во-первых, надо иметь Flash. Хранилище доступно только после инициализации Flash-ролика.

Много ошибок в различных версиях Flash затрагивают ExternalInterface, включая повреждение данных во время передачи JS->Flash.

Проще всего узнать о них:

  • http://google.ru/search?q=ExternalInterface+bug

Много работы над обходом багов провел Brad Neuberg для flash-хранилища в dojo:

  • http://svn.dojotoolkit.org/dojo/dojox/trunk/storage
  • http://svn.dojotoolkit.org/dojo/dojox/trunk/storage

Резюме.

DOM Storage и аналогичные системы хранения - важный шаг к offline-работе web-приложений.

В браузере Opera все еще приходится использовать Flash Shared Object, а Firefox, Internet Explorer, Safari реализуют хранилище без дополительных плагинов и Flash<->JS коммуникации.

Интересным сектором для интеграции могут быть CRM-системы с нестабильным интернетом. Например, мини-точка продаж, в которой основная работа идет через интеренет, но хранение текущих договоров дублируется на рабочей машине.

Offline-хранилище может быть использовано для сохранения сложных состояний интерфейса - размеров окон, контрольных элементов и т.п.

Все изменения интерфейса посетителем мгновенно сохранятся в DOM Storage и восстановятся при следующем заходе на страницу без дополнительных механизмов сохранения интерфейса на сервере.

При этом объем хранимого состояния интерфейса вряд ли превысит ограничение в сотни килобайт. Идеальный объект для DOM Storage, не правда ли ?..


Об авторе:

Илья Кантор, в разработке интернет-приложений с 1999 года. Начиная с 2003 года разрабатывает клиентские интерфейсы и сложные поисковые структуры для баз данных.

В свободное время поддерживает полезные ресурсы, посвященные алгоритмам и методам программирования и разработке на клиенте: Firebug, XmlHttpRequest и др.

 

\

Подписка на новости IT-портала citforum.ck.ua
(библиотека, citforum.ck.ua, CitCity)

Новые публикации:

2 апреля

  • NULL, трехзначная логика и неопределенность в SQL: критика критики Дейта
  • Критика критики критики Дейта
  • Сервис-ориентированный подход в бизнес-аналитике от Oracle
  • Хранение данных на клиенте. DOM Storage и его аналоги
  • citforum.ck.ua:

  • Conky - системный монитор
  • Звук в Linux
  • Linux swap space
  • Описание пакетов KDE
  • 27 марта

    Обзоры журнала Computer:

  • Мечты Дэвида Харела
  • О вреде избыточного питания компьютеров
  • SOA: просто для большинства, сложно для меньшинства
  • CitCity:

  • 12 дюймов и меньше - а стоит ли "овчинка" выделки?
  • Сравнение электронных автомобильных карт и автонавигаторов
  • BI-технологии, что нас ждет в ближайшие годы
  • citforum.ck.ua:

  • И снова Старый Оскол: второй семинар по свободному софту
  • Новые Блогометки:

  • Xdiskusage: где место?!
  • TTF-Inconsolata: открытый шрифт для вашего терминала и красивых распечаток кода
  • Jed: карманный EMACS
  • Ipcalc: полезная информация об IP и маске сети
  • IPTraf: монитор локальной сети с интерфейсом ncurses
  • Burgerspace: свободный клон классической аркады «Burgertime»
  • 19 марта

  • Технология проектирования модели предприятия на основе универсальной модели данных
  • CitCity:

  • Гимн героям Microsoft
  • citforum.ck.ua:

  • Колонки Алексея Федорчука из журнала Linuxformat
  • Завершение цикла Сергея Голубева "Linux для начинающих":
    • Работа в сети
    • Пользовательские приложения

    Новые Блогометки:

  • И вечный бой... со шрифтами
  • Введение в API для карт Google
  • Conky: хорошо настраиваемый системный монитор для X
  • Newsbeuter: чтение RSS из консоли
  • Katapult: ускоренный и упрощенный доступ к приложениям, закладкам и файлам
  • GPRename: пакетное переименование с интерфейсом GTK2-Perl
  • Duplicity: шифрованное и экономное для трафика резервное копирование на основе алгоритма rsync
  • Listadmin: консольное управление очередью модерации Mailman
  • 12 марта

  • Восход и закат High Performance Fortran: наглядный урок истории (пересказ: С.Кузнецов)
  • citforum.ck.ua:

    Новые Блогометки:

  • Ccze: хорошее модульное средство подсветки логов
  • PWSafe - кроссплатформенное средство для работы с паролями
  • colordiff - подсветка для diff
  • psmisc: рассмотрим ближе стандартный пакет
  • Работа с сетью
  • xkb, узелок на память
  • ffmpeg-php
  • debiannotes:desktop:prettyfonts
  • 5 марта

    citforum.ck.ua:

  • Ричард Столлман в Москве
  • О мудром доценте замолвите слово... (Интенсификация Малаховна)
  • Новые Блогометки:

  • "Десктопизация" OpenBSD
  • weather: проверяйте сводку и прогноз погоды из командной строки
  • hpodder: клиент подкастов, который просто работает
  • bc: язык численных расчетов с произвольной точностью
  • Decibel: аудиоплеер для людей
  • GNU Wget: загрузите весь понравившийся сетевой контент на локальный компьютер
  • Deborphan: найдите ненужные пакеты
  • Kivio: мощный и простой в использовании редактор блок-схем
  • Cowsay: настраиваемая говорящая и думающая корова
  • Thoggen: основанная на GTK+ программа для извлечения видео с DVD
  • 28 февраля

  • Подбор и развитие команд
    Глава из книги «Руководство командой разработчиков программного обеспечения. Прикладные мысли» (С.Архипенков)
  • citforum.ck.ua:

    Дискуссия об анонимусах:

  • К комментаторам
  • Windows против Linux - психологический портрет участников форумов
  • Новые Блогометки:

  • Nokia N810 - Linux Inside
  • LiMo - стандарты Linux для сотовых телефонов
  • timer-applet: таймер для панели GNOME
  • Debfoster: удалите пакет и все его зависимости
  • GPW: генератор произносимых паролей
  • AMOR: общество для рабочего стола
  • 20 февраля

    citforum.ck.ua:

    Новые Блогометки:

  • Кое-что о приложениях KDE 4
  • Инструкция по установке KDE 4 в Ubuntu
  • Настоящие мужчины ставят KDE из SVN!
  • Начат переход Amarok на Qt 4.4
  • Marble
  • Dillo - сверхбыстрый браузер
  • Создаем резервные копии настроек программ и важных файлов в Ubuntu LInux
  • NTP: всегда вовремя
  • VYM - простое средство зарисовки мыслей и планирования
  • KBibTeX: простой и гибкий редактор библиографий для KDE
  • Дискуссия Windows vs Linux:

  • Жил-был Мальчик, или Сказочка о Том, Откуда Берутся "КУЛХАЦКЕРЫ", ненавидящие Линукс и Юникс
  • 13 февраля

  • Терминологический словарь Wi-Fi
  • Задача проектирования базы данных методом нормализации
  • CitCity:

  • Лучшие смартфоны начала 2008 года
  • citforum.ck.ua:

  • Первый взгляд на Firefox 3.0
  • Open Source на Белгородщине: семинар в Старом Осколе
  • Что такое KDE?
  • Цикл о Slackware:

  • Русский в консоли
  • Быстрая настройка Иксов
  • xorgconfig - консольный подход
  • 6 февраля

    citforum.ck.ua:

  • Мобильный Linux – вчера, сегодня, завтра
  • Чем записать диски в Linux? Попробуй Brasero!
  • Консольные команды
  • Рецепты. Кое-что о программе mplayer
  • Slackware:
    • Что такое Slackware?
    • Установка Slackware - Загрузка
    • Категории программного обеспечения
    • Структура файловой системы
    • Система инициализации Slackware Linux
    • Скрипты инициализации уровня запуска

    30 января

  • Обзор алгоритмов MOLAP
  • CitCity:

  • BI-технологии 2007. Итоги года
  • Рынок СУБД для Хранилищ данных 2007. Итоги года, тенденции
  • Обзор рынка BI (по результатам исследований IDC, OLAP Report, Gartner)
  • Модель зрелости BI
  • citforum.ck.ua:

  • Владимир Попов: За что я люблю Linux
  • Священные войны
  • 23 января

  • Data Mining от Oracle: настоящее и будущее
  • Комментарии к статье Ч.Бергера «Data Mining от Oracle: настоящее и будущее»
  • Байесовский классификатор и регрессионная модель в ORTD: практический пример
  • citforum.ck.ua:

    Дискуссия Windows vs Linux:

  • Программисты и фирмы: кто кого
  • О "чистых пользователях"
  • Новые Блогометки:

    • Почему Jabber, а не ICQ?
    • Archlinux install quick
    • Arch на IBM Z60m
    • Arch + IBM R50e
    • OpenBSD - сборка E17-cvs (или ещe одна маленькая победа разума)
    • OpenBSD - всe для Человека и ради Человека...
    • PekWM
    • E17 и "прозрачность"
    • E17 - приятные мелочи (multimedia)
    • SuSE + Enlightenment = угробил целый день

    16 января

  • Вьетнам компьютерной науки (пересказ - С.Кузнецов)
  • Пример построения автоматизированного управления дисками (ASM) (В. Пржиялковский)
  • CitCity:

  • 2008 год: антипрогноз
  • citforum.ck.ua:

    Новые Блогометки:

    Сети и Интернет:

    • Mozilla firefox. Шрифты в меню
    • Screen tips
    • Liferea: программа чтения RSS для GNOME
    • HTTrack: скачивание и зеркалирование сайтов
    • Clusterssh: работа с несколькими сеансами SSH через общий интерфейс

    Десктопы:

    • Fluxbox & xinitrc. Some new tips
    • Как я конфигурировал xdm

    Системы:

    • SuSE 10.2: zypper - еще один способ установки пакетов
    • cpipe: определите пропускную способность конвейера команд
    • gddrescue: средство восстановления данных с поврежденных носителей
    • VirtualBox: ваш виртуальный ПК

    Приложения:

    • MyTop: top для MySQL

    10 января

    citforum.ck.ua:

    Дискуссионный клуб:

  • Краткое руководство по общению с никсофилами (Интенсификация Малаховна Сергина-Гейтс)
  • О троллях
  • Пещера горного короля: заметки о троллинге
  • Новые Блогометки:

    Сети и Интернет:

    • Делаем блог на Drupal
    • Использование lftp
    • Устанавливаем FTP сервер ProFTPd с TLS шифрованием
    • Управляем файлами на FTP сервере с помощью FileZilla

    Десктопы:

    • fluxbox.autorun
    • 15 человек на сундук мертвеца! (или песнь о зарытых сокровищах)

    Системы:

    • Живой Debian или рабочее место в кармане
    • Разбивка hdd

    Приложения:

    • Cat Excel files
    • Vim: меню выбора кодировок

    26 декабря

    citforum.ck.ua:

  • В Блогометках открыты разделы:
    • Софт для Windows
    • Сети и Интернет
  • dwm. От статики к динамике
  • Установил Solaris
  • Новая Дискуссия:
    • Нужен ли русский Linux?

    19 декабря

  • SQL Anywhere: встраиваемая СУБД
  • citforum.ck.ua:

  • В разделе Блогометки появились рубрики:
    • Десктопы
    • Приложения
    • Системы
  • Подробно о разделе: Блоги и блогометки: открываем сезон промывки
  • 13 декабря

    CitCity:

  • Microsoft и Барселона: сюрреализм?
  • citforum.ck.ua:

  • Открыт новый раздел Блогометки
  • ZFS в подробностях. 1. Былое и ныне
  • 5 декабря

  • Архитектура предприятия: основные определения
  • Архитектуры для государственных ведомств. Примеры
  • Обзор журнала Computer:

  • Высокопроизводительные встроенные системы
  • citforum.ck.ua:

  • Продолжение цикла Linux для начинающих:
    • Пользовательские интерфейсы
    • Файлы
    • Системы настройки

    Все публикации >>>


    На правах рекламы:

  • Эффективные модели данных ключ к успеху в бизнесе
  • Все публикации >>>




IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Информация для рекламодателей Пресс-релизы -
Послать комментарий
Информация для авторов
Rambler's Top100 This Web server launched on February 24, 1997
Copyright © 1997-2000 CIT, © 2001-2007 CIT Forum
Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...
[an error occurred while processing this directive]