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

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

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

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

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

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

Почти во всех браузерах есть поддержка cookiesКуки (слово не склоняется; от англ.cookie— печенье)— небольшой фрагмент данных, созданный веб-сервером или веб-страницей и хранимый на компьютере пользователя в виде файла, который веб-клиент (обычно веб-браузер) каждый раз пересылает веб-серверу в HTTP-запросе при попытке открыть страницу соответствующего сайта..

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

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

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

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

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

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

Firefox реализует стандартСтандарт (от англ.standard— норма, образец) в широком смысле слова— образец, эталон, модель, принимаемые за исходные для сопоставления с ними др. подобных объектов. хранения "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Интернет (произносится [интэрнэт]; англ.Internet)— всемирная система объединённых компьютерных сетей, построенная на использовании протокола IP и маршрутизации пакетов данных. Интернет образует глобальное информационное пространство, служит физической основой для Всемирной паутины и множества других систем (протоколов) передачи данных. Часто упоминается как «Всемирная сеть» и «Глобальная сеть». В обиходе иногда говорят «Инет». Explorer. userData.

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

Он работает посредством выделенного DOM-элемента, которому назначается behavior«Behaviour» (англ. Поведение)— четвёртый студийный альбом британской поп-группы Pet Shop Boys. Альбом значительно отличался от предыдущих работ дуэта, построенных под сильным влиянием итало-диско и Hi-NRG; здесь же ни одна из альбомных композиций не является танцевальной. «Behaviour» получил лестные рецензии и добрался до 2-го места в британском хит-параде (вышли также альбомные хит-синглы «So Hard» и «Being Boring»). По продажам в Великобритании альбом стал платиновым, в США — золотым. 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 на домен, для локальных и интранет - лимит увеличен.

Ограничения безопасности - та же директория, тот же домен и протоколПротокол (от др.-греч. protos— «первый» и kolla— «клей»)— первый лист, приклеенный к свитку. На нем фиксировались титульная информация (например, дата написания, имя писателя) и краткое основное содержание свитка..

Дополнительные материалы

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

Safari(WebKit). Database storage.

Дальше всех в поддержке стандарта хранения пошли разработчики WebKitWebKit— свободный движок для отображения веб-страниц, разработанный на основе кода библиотек KHTML и KJS, используемых в графической среде KDE..
В Safari реализовано локальное хранение в базе данных SQLiteSQLite— легковесная встраиваемая реляционная база данных. Исходный код библиотеки передан в общественное достояние. В 2005 году проект получил награду Google-O’Reilly Open Source Awards..

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

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

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

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

db = openDatabase("Test", "1.0", "WebkitWebKit— свободный движок для отображения веб-страниц, разработанный на основе кода библиотек KHTML и KJS, используемых в графической среде KDE. Storage Example")

 
db.transaction(function(tx) {
  tx.executeSql(
      "CREATECREATE— DDL оператор языка SQL используемый для создания объектов базы данных. Различные СУБД работают с различными объектами. 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) выполняется в одной транзакцииТранзакция (англ.transaction)— в информатике, группа последовательных операций, которая представляет собой логическую единицу работы с данными. Транзакция может быть выполнена либо целиком и успешно, соблюдая целостность данных и независимо от параллельно идущих других транзакций, либо не выполнена вообще и тогда она не должна произвести никакого эффекта. Транзакции обрабатываются транзакционными системами, в процессе работы которых создаётся история транзакций..

Вызов 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), на котором была создана. ПоддоменПоддомен (англ.subdomain) — домен, являющийся частью домена более высокого уровня. не имеет доступа к базе домена.

Дополнительные материалы

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

На момент написания статьи разработчики WebKit планировали поддержку DOM Storage, но в nightlyMozilla Firefox (произносится моузила файрфокс, [mozl fa()fks] — свободно распространяемый браузер, входящий в набор программ Mozilla Application Suite, разработкой и распространением которого занимается Mozilla Corporation. Второй по популярности браузер в мире и первый среди свободного ПО— в июле 2011 года его рыночная доля составила 27,95%. Браузер имеет особенный успех в некоторых странах, в частности, в Германии и Польше это самый популярный браузер с долей 55% и 47% соответственно. В России Firefox занимает первое место по популярности среди десктопных браузеров с долей 30,74% пользователей к июлю 2011 года. 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])
}

Чтобы работать с этим хранилищем из javascriptJavaScript— объектно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript., нужен способ коммуникации 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; // .. и устанавливать текст в окошке
}
 
// Это действие, наоборот, отправляет данныеДанные (калька от лат.data) — это представление фактов и идей в формализованном виде, пригодном для передачи и обработки в некотором информационном процессе. в 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, SafariSafari— браузер, разработанный корпорацией Apple и входящий в состав операционной системы Mac OS X, а также бесплатно распространяющийся для операционных систем семейства Microsoft Windows. Занимает четвертое место по числу пользователей (рыночная доля в ноябре 2011 года— 6,18%). реализуют хранилище без дополительных плагинов и Flash<->JS коммуникации.

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

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

Все изменения интерфейса посетителем мгновенно сохранятся в DOM Storage и восстановятся при следующем заходе на страницу без дополнительных механизмов сохранения интерфейсИнтерфейс (от англ.interface— поверхность раздела, перегородка)— совокупность средств, методов и правил взаимодействия между элементами системы.а на сервере.

При этом объем хранимого состоянияПсихическое состояние— один из возможных режимов жизнедеятельности человека, на физиологическом уровне отличающийся определёнными энергетическими характеристиками, а на психологическом уровне— системой психологических фильтров, обеспечивающих специфическое восприятие окружающего мира.

Наряду с психическими процессами и свойствами личности состояния являются основными классами психических явлений, которые изучает наука психология. Психические состояния влияют на протекание психических процессов, а, повторяясь часто, приобретя устойчивость, могут включиться в структуру личности в качестве её специфического свойства. Так как в каждом психическом состоянии присутствуют психологические, физиологические и поведенческие компоненты, то в описаниях природы состояний можно встретить понятия разных наук (общей психологии, физиологии, медицины, психологии труда ит.д.), что создаёт дополнительные трудности для исследователей, занимающихся данной проблемой. В настоящее время не существует какой-либо единой точки зрения на проблему состояний, так как состояния личности можно рассматривать в двух аспектах. Они являются одновременно и срезами динамики личности, и интегральными реакциями личности, обусловленными её отношениями, поведенческими потребностями, целями активности и адаптивности в окружающей среде и ситуации. интерфейса вряд ли превысит ограничение в сотни килобайт. Идеальный объект для DOM Storage, не правда ли ?..

---

Об авторе:

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

В свободное время поддерживает полезные ресурсыРесурсы— всё, что необходимо человеку (физическому лицу) и организации (в том числе юридическому лицу) для достижения цели, для удовлетворения собственных потребностей и потребностей субъектов или объектов внешней среды. Ресурсы могут быть трудовые, информационные, материальные, финансовые., посвященные алгоритмам и методам программирования и разработке на клиенте: Firebug, XmlHttpRequest и др.