Книга: JavaScript. Подробное руководство, 6-е издание

20.3. Механизм сохранения userData в IE

20.3. Механизм сохранения userData в IE

В IE версии 5 и ниже поддерживается механизм сохранения данных на стороне клиента, доступный в виде нестандартного свойства behavior элемента документа. Использовать его можно следующим образом:

var memory = document.createElement("div"); // Создать элемент
memory.id = "_memory”;                      // Дать ему имя
memory.style.display = "none";              // He отображать его
memory.style.behavior = "url('#default#userData')"; // Присоединить свойство
document.body.appendChild(memory);          // Добавить в документ

После того как для элемента будет определено поведение «userData», он получает новые методы load() и save(). Вызов метода load() загружает сохраненные данные. Этому методу можно передать строку, напоминающую имя файла и идентифицирующую конкретный пакет хранящихся данных. После загрузки данных пары имя/значение становятся доступны в виде атрибутов элемента, получить которые можно с помощью метода getAttribute(). Чтобы сохранить новые данные, необходимо установить атрибуты вызовом метода setAttribute() и затем вызвать метод save(). Удалить значение можно с помощью методов removeAttribute() и save(). Ниже приводится пример использования элемента memory, инициализированного выше:

memory.load("myStoredData");                // Загрузить сохраненные данные
var name = memory.getAttribute("username"); // Получить элемент данных
if (!name) { // Если он не был определен,
  name = prompt("Как вас зовут?);         // запросить у пользователя
  memory.setAtttribute("username", name); // Установить как атрибут
  memory.save("myStoredData");            // И сохранить до следующего раза
}

По умолчанию данные, сохраняемые с помощью механизма userData, имеют неограниченный срок хранения и сохраняются до тех пор, пока явно не будут удалены. Однако с помощью свойства expires можно определить дату, когда истечет срок хранения данных. Например, в предыдущий фрагмент можно было бы добавить следующие строки, чтобы указать, что срок хранения данных истечет через 100 дней:

var now = (new Date()).getTime();              // Текущее время в миллисекундах
var expires = now + 100 * 24 * 60 * 60 * 1000; // + 100 дней в миллисекундах
expires = new Date(expires).toUTCString();     // Преобразовать в строку
memory.expires = expires;                      // Установить срок хранения

Данные, сохраняемые с помощью механизма userData в IE, доступны только для документов, хранящихся в том же каталоге, что и оригинальный документ, сохранивший их. Это более ограниченная область видимости, чем у cookies, которые также доступны документам в подкаталогах оригинального каталога. В механизме userData отсутствует какой-либо эквивалент атрибутов path и domain в cookies, позволяющий расширить область видимости данных.

Механизм userData позволяет сохранять гораздо большие объемы данных, чем cookies, но меньшие, чем объекты localStorage и sessionStorage.

Пример 20.3 реализует методы getltem(), setltem() и removeltem() интерфейса Storage поверх механизма userData в IE. (Он не реализует такие методы, как кеу() и clear(), потому что механизм userData не предоставляет возможность выполнять итерации по всем хранящимся элементам.)

Пример 20.3. Частичная реализация интерфейса Storage на основе механизма userData в IE

function UserDataStorage(maxage) {
  // Создать элемент документа и установить в нем специальное
  // свойство behavior механизма userData, чтобы получить доступ
  // к методам save() и load().
  var memory = document.createElement("div"); // Создать элемент
  memory.style.display = ''none"; // He отображать его
  memory.style.behavior = "url('#default#userData')"; // Присоединить свойство behavior
  document.body.appendChild(memory); // Добавить в документ
  // Если указано значение параметра maxage, хранить данные maxage секунд
  if (maxage) {
    var now = new Date().getTime(); // Текущее время
    var expires = now + maxage * 1000; // maxage секунд от текущего времени
    memory.expires = new Date(expires).toUTCString();
  }
  // Инициализировать хранилище, загрузив сохраненные значения.
  // Значение аргумента выбирается произвольно, но оно должно совпадать
  // со значением, переданным методу save()
  memory.load("UserDataStorage”); // Загрузить сохраненные данные
  this.getltem = function(key) { // Загрузить значения атрибутов
    return memory.getAttribute(key) || null;
  };
  this.setltem = function(key, value) {
    memory.setAttribute(key,value); // Сохранить значения как атрибуты
    memory.save("UserDataStorage"); // Сохранять после любых изменений
  };
  this.removeltem = function(key) {
    memory.removeAttribute(key); // Удалить сохраненные значения
    memory.save("UserDataStorage"); // Сохранить новое состояние
  };
}

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

<!—[if IЕ]>
  <script src="UserDataStorage.js"></script>
<![endif]-->

Оглавление книги