Статьи

HTML 5 – веб-хранилище

Чтобы избежать путаницы, HTML 5 Web Storage не является API базы данных индекса или Web SQL Database, которые также являются функциями, связанными с HTML 5, которые начали поддерживать некоторые браузеры.

HTML 5 Web Storage — это разновидность хранилища в браузере, похожая на файлы cookie, но обладающая рядом преимуществ.

Размер хранилища


Файлы cookie позволяют хранить небольшой объем данных (максимум 4 КБ на файл cookie) в браузере. Для большинства веб-сайтов это более чем достаточно места и недостаточно оснований для переключения механизмов хранения. Если вашему веб-сайту / веб-приложению требуется более 4 КБ дискового пространства для хранения в браузере, возможно, вам подойдет веб-хранилище.

Спецификация W3C для веб-хранилища позволяет каждому браузеру определить, сколько места для хранения разрешено по умолчанию, но предлагает минимум 5 МБ. В спецификации также указывается, что браузеру разрешено предлагать пользователю увеличить объем памяти, если требуется больше.

Объем веб-хранилища в Internet Explorer составляет 10 МБ, а для других браузеров, таких как Firefox и Opera, установлен размер 5 МБ.

Сетевая задержка


Еще одним недостатком файлов cookie является то, что они передаются туда-сюда с каждым веб-запросом. Наличие этих данных на стороне сервера иногда удобно, но можно обойтись без этих данных, используя другие средства (параметры URL / Post, запрос AJAX и т. Д.).

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

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

Поддержка браузера


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

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

Типы объектов веб-хранилища

Существует два типа объектов веб-хранилища, которые находятся внутри объекта окна, называемые sessionStorage и localStorage.

Объекты веб-хранилища — это в основном список пар ключ / значение.
Тест для функций браузера

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

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

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


// Check if the sessionStorage object exists
if (window.sessionStorage) { g_bBrowserSupportsSessionStorage = true; }

// Check if the localStorage object exists
if (window.localStorage) { g_bBrowserSupportsLocalStorage = true; }

Различия между sessionStorage и localStorage


Каждое окно / вкладка получает свою собственную копию объекта sessionStorage, который позволяет хранить пары ключ / значение, специфичные для текущего окна.

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

При использовании localStorage каждый источник (например, SomeFreeWebSiteHost.com) получает одну копию объекта localStorage, которая является общей для всех окон / вкладок этого источника. Преимущество этого заключается в том, что несколько окон вашего веб-сайта / веб-приложения могут легко обмениваться данными, но простота обмена может привести к проблемам безопасности, если вы не знаете, как этот объект используется совместно.

Пары ключ / значение sessionStorage существуют только при открытом браузере. В момент закрытия браузера пары ключ / значение sessionStorage для вашего окна очищаются.

В localStorage пары ключ / значение остаются неизменными, даже если браузер закрыт и снова открыт.

Объект веб-хранилища — методы и свойства

Оба типа веб-хранилищ имеют одинаковые функции и свойства:
  • setItem (ключ, значение)
  • GetItem (Key)
  • RemoveItem (Key)
  • Чисто()
  • ключ (iIndex)
  • длина

setItem добавляет пару ключ / значение в объект хранения, если ключ еще не существует в объекте хранения. Если ключ уже существует в объекте хранения, значение просто обновляется.

getItem возвращает значение из объекта хранения для указанного ключа. Если ключ не существует в объекте хранения, возвращается ноль.

removeItem удаляет элемент, указанный из объекта хранения.

clear удаляет все элементы из объекта хранения
.

Ключ возвращает имя элемента с указанным нулевым индексом. Возвращает ноль, если индекс не существует.

length возвращает число, указывающее, сколько пар ключ / значение находятся в объекте хранения
.

Сокращенные методы

Поскольку веб-хранилище реализовано на JavaScript, существуют сокращенные методы, которые можно использовать вместо непосредственного вызова setItem или getItem.

Следующие примеры все используют объект sessionStorage, но вы можете поменять его местным для localStorage, и они все равно будут работать.

Следующие примеры представляют собой разные способы вызова setItem для объекта sessionStorage:

// The method outlined in the W3C spec
window.sessionStorage.setItem("OurKey", "Some Value");

// Using array notation
window.sessionStorage["OurKey"] = "Some Value";

// Using dot notation
window.sessionStorage.OurKey = "Some Value";
В следующих примерах представлены разные способы вызова getItem для объекта sessionStorage:

// The method outlined in the W3C spec
var sValue = window.sessionStorage.getItem("OurKey");

// Using array notation
var sValue = window.sessionStorage["OurKey"];

// Using dot notation
var sValue = window.sessionStorage.OurKey;

Ниже приведены примеры способов удаления элементов из объекта sessionStorage:

// Remove a single item using the method outlined in the W3C spec
window.sessionStorage.removeItem("OurKey");

// Remove a single item using the delete keyword
// (same as above, just with a different syntax)
delete window.sessionStorage["OurKey"];

// Remove all items
window.sessionStorage.clear();
События хранения

В соответствии со спецификацией W3C для веб-хранилища, всякий раз, когда изменяется объект хранилища (например, setItem, removeItem), событие «хранилища» должно передаваться во все окна, к которым применяется изменение.


Событие хранения не всплывает и не может быть отменено.

Когда вы изменяете объект sessionStorage, модификация применяется только к текущему окну. Странно то, что только Internet Explorer 8 (и IE 9) получает вызов события хранилища, когда объект sessionStorage изменяется.

Когда вы изменяете объект localStorage, модификация применяется ко всем окнам / вкладкам источника этого окна, и в результате другие окна, которые открываются из того же источника, также получат событие.

Присоединение к событию хранения

Internet Explorer 8 реализует событие хранения иначе, чем все другие браузеры, включая IE 9, в том смысле, что событие передается объекту документа, а не объекту окна. Это различие может быть связано с тем, что спецификация веб-хранилища все еще находится в стадии разработки, и Internet Explorer, возможно, реализовал эту функцию только для того, чтобы изменить спецификацию объекта окна (это всего лишь предположение относительно того, что могло произойти — Я действительно не знаю, но я даю Microsoft преимущество сомнения здесь).

Обойти описанную выше проблему событий хранилища Internet Explorer 8 не так уж сложно, поскольку Internet Explorer 9 теперь поддерживает addEventListener. Ниже приведен пример присоединения к событию «хранилище», которое также будет работать с IE 8:

// Add the event listener (W3C browsers, including IE 9,
// use addEventListener)
if (window.addEventListener)
{

    // Listen for the storage event (triggered when the
    // storage is modified - setItem, removeItem, clear)
    window.addEventListener("storage", OurStorageListener, true);

}
else if (window.attachEvent) // IE 8 and previous...
{

    // Listen for the storage event on the DOM object
    // (Hack since attachEvent is an IE 8 and previous
    // thing - might not be totally cross-browser if
    // other browsers also implement attachEvent)
    document.attachEvent("onstorage", OurStorageListener);

}

Приведенный выше пример может быть не лучшим подходом, если другие браузеры, отличные от IE, также имеют метод attachEvent.

Получение события хранения

Получить событие хранения довольно просто, как только вы присоединитесь к событию. Все, что вам нужно, это функция, которая получает параметр события, как в следующем примере:

function OurStorageListener(e)
{

    // Take the event details and put it into a string
    var sValue = ("Key: " + e.key +
    " ...New Value: " + e.newValue +
    " ...Old Value: " + e.oldValue +
    " ...URL: " + e.url +
    " ...Storage Area: " + e.storageArea);

    // Display the event details to the screen
    document.getElementById("divResults2").innerHTML = sValue;

}
Это событие будет вызываться всеми браузерами, которые реализуют событие «хранилище», когда объект хранилища изменяется, если этот объект также применяется к окну, которое зарегистрировало это событие.

В Internet Explorer 9 существует потенциальная ошибка, поскольку изменения объекта localStorage не вызывают событие хранилища.

Я упоминал об этом ранее, но я упомяну это снова на всякий случай, изменения в объекте sessionStorage в настоящее время только вызывают событие хранения в Internet Explorer 8 и 9. В настоящее время это событие не вызывается никаким другим браузером из того, что я могу сказать, хотя спецификация W3C, кажется, указывает, что она должна быть запущена даже для объекта sessionStorage.

В вышеприведенном примере следует отметить, что не все браузеры, поддерживающие событие хранилища, фактически поддерживают все свойства события хранилища. Например, Internet Explorer 8 поддерживает только свойство url.

В браузерах, которые поддерживают свойства событий хранилища, доступны следующие свойства:
ключ — это ключ, который меняется. В наших примерах выше это будет «OurKey». Это будет нулевым, если событие было результатом вызова функции очистки для объекта хранения
.

newValue — это значение, указанное, если был сделан вызов setItem. Если был выполнен вызов removeItem, это значение будет нулевым. Это свойство также будет нулевым, если функция очистки была вызвана для объекта хранения.


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

url — это адрес документа, на который был затронут объект хранения
.

storageArea представляет объект хранилища, который был затронут (ссылка на объект хранилища, который был изменен, чтобы упростить вам доступ к значениям внутри объекта, а также возможность изменять элементы в случае необходимости). Таким образом, вам не нужно угадывать, был ли изменен сеанс или объект локального хранилища, поскольку у вас есть прямой доступ к измененному объекту.

Некоторые заключительные мысли о веб-хранилище

Согласно спецификации W3C для веб-хранилищ, существует предположение, что веб-браузеры могут по желанию отключить функцию веб-хранилища (возможно, в качестве функции безопасности и только для сайтов, включенных в белый список). Если вы попытаетесь получить доступ к объекту хранилища, когда веб-хранилище отключено, может возникнуть исключение.

Существует также возможность, если ваш веб-сайт / веб-приложение хранит большой объем данных, что вы превысите предел, заданный браузером для вашего окна / источника. Этот лимит достаточно высок (5 МБ в большинстве случаев и 10 МБ для Internet Explorer), но в случае его срабатывания может также возникнуть исключение.

Более подробную информацию о спецификации HTML 5 Web Storage вы можете просмотреть, перейдя по следующей ссылке:
http://www.w3.org/TR/webstorage/