Технологии будущего

6.8. Клиентские хранилища

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

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

6.8.1. Cookie

Первопроходцем на ниве сохранения данных на клиенте можно назвать компанию Netscape, сотрудник которой придумал cookie — сохраняемые на компьютере пользователя в виде "ключ-значение" данные небольшого объема. Объем действительно небольшой, различные браузеры имеют разные ограничения, но даже в лучшем случае их не может быть больше 50, размером не более 4 Кб каждая. Некоторые версии Internet ExpLorer разрешают устанавливать не более 20 cookie, общим объемом не более 4 Кб (в IE 8 — 50 значений, общим объемом 10 Кб).

Другой недостаток: при каждом запросе все cookie передаются на сервер, что иногда сильно увеличивает объем трафика и снижает отзывчивость приложения. С передачей cookie на сервер связано еще одно ограничение их объема — дело в том, что многие сервера имеют различные лимиты на размер заголовка запроса, при превышении которого сервер откажется обработать запрос.

Например, у популярного веб-сервера Apache есть ограничение на длину каждой строки запроса (директива LimitRequestLine), по умолчанию оно составляет 8 Кб. Отсюда следует, что ограничение сверху на размер cookie (в том худшем случае, если cookie целиком будет состоять из URL-encoded символов) — 2,6 Кб. Конечно, если вы имеете доступ к настройке вашего сервера, это ограничение можно снять.

Но у cookie есть важное достоинство — к ним можно осуществлять доступ из клиентских скриптовых языков.

API cookie, если это так можно назвать, очень примитивное. Поскольку использование cookie в браузере можно запрещать, приложению сначала желательно проверить значение свойства navigator.cookieEnabled. Если его значение — истина, то можно прочитать значение document.cookie.

Значение этого свойства представляет собой строку, где записаны все cookie, объединенные через точку с запятой и пробел. Ключ и значение каждого cookie объединены через знак "равно", впрочем, из этого правила бывают исключения: авторам известны случаи, когда Internet Explorer записывал cookie с пустым значением без "равно".

У cookie помимо имени есть несколько атрибутов (перечислены под- держиваемые всеми браузерами):

• expires — время хранения cookie; если этот атрибут не указан, то cookie удалится после закрытия окна браузера, где значение этого cookie было создано. Чтобы удалить cookie, нужно поставить в это поле любую дату прошлого.
• domain — домен, для которого создается данное значение, остальные домены могут иметь собственные cookie с тем же именем; если параметр не задан, используется текущее имя домена. Допустимые значения — домен, с которого загружен документ, или поддомен этого домена.
• path — путь, для которого создается значение; по умолчанию используется путь текущей страницы. Путь тут трактуется как директория — значение будет существовать и для всех вложенных путей.
• secure — флаг, наличие которого означает, что данное значение cookie будет передаваться только по HTTPS

Для того чтобы создать новое значение cookie из скриптового клиентского языка, нужно записать в document.cookie строку вида

key=value; expires=Fri, 31-Dec-2010 23:59:59 GMT; path=/;
domain=.example.net

Как было сказано выше, все поля, кроме пары "ключ-значение", можно опустить. Точка перед доменом в параметре domain означает, что это значение будет установлено и для всех доменов выше уровнем. При записи нового значения cookie его значение в указанном домене изменится.

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

6.8.2. userData behavior

Компания Microsoft, которая первой начала осваивать веб-приложения в том смысле, в котором мы сейчас используем этот термин, довольно давно предложила программистам механизм для сохранения более существенных объемов данных на компьютере пользователя.

Уже в Internet ExpLorer 5 появился так называемый userData behavior, собственное расширение Microsoft, которое позволяло хранить до 128 Кб данных в одной записи, общим объемом до 1 Мб, причем в интранете лимит еще более отодвигался — 512 Кб и 10 Мб.

API по нынешним временам нельзя назвать удобным, но тогда это было частью интересной идеологии behavior, позволяющей разделить данные и логику.

Данные хранятся в DOM-элементе, у которого, посредством CSS, указан behavior userData:

function IEStorage (storagename) {
  this.storagename = storagename
    var el = document.createElement('div');
    el.setAttribute('id', 'ourstore-' + storagename);
    el.style.display = 'none';
    el.addBehavior('#default#userData');
    document.body.appendChild(el);
    this.storage = el;
    this.get = function (name) {
      this.storage.load(this.storagename);
      return this.storage.getAttribute(name);
}
this.set = function (name, value) {
  this.storage.setAttribute(name, value);
  this.storage.save(this.storagename)
}
this.del = function (name) {
  this.storage.removeAttribute(name);
  this.storage.save(this.storagename);
}
}

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

Особенность этого хранилища — можно установить дату устаревания всех его элементов, удалены они будут при вызове load:

var time = new Date();
time.setHours(time.getHours() + 1);
// через час данные будут удалены
this.storage.expires = time.toUTCString();

6.8.3. Flash Local Shared Object

В марте 2002 года появилась шестая версия Flash, популярнейшего плагина для браузеров, установленного, по статистике, на 95% компьютеров. В этой версии появилось собственное хранилище — Local Shared Object, позволяющее хранить до 100 Кб данных без ведома пользователя и любой объем сверх этого с его разрешения. У роликов с одного домена единый Local Shared Object.

Способ использования этого типа хранилища — установка на странице Flash-ролика, который будет обмениваться данными со скриптовым языком. Вплоть до восьмой версии Flash не существовало хорошего способа обмена данными со скриптовыми языками браузера, пока в Flash8 не появился ExternalInterface, реализованный, впрочем, с существенными ошибками.

Хотя и прежние способы, более похожие на хаки, позволяют производить обмен (по крайней мере теоретически), универсальные библиотеки для доступа к клиентским хранилищам, которые будут рассмотрены далее, требуют для своей работы восьмую версию Flash.