Знакомство с Web Storage
Web Storage
Web storage (локальное хранилище) — база данных на стороне клиента, содержащая пары ключ-значение. Надеюсь, что в ближайшем будущем эта технология станет стандартом в веб-разработке.
Исторически получилось, что веб приложения лишены такой роскоши. Куки были придуманы еще на заре Интернет и они дают возможность сохранить локально информацию малого объема. Но у куки есть ряд недостатков:
- куки включены в каждый HTTP запрос, замедляя обмен данными с сервером передавая каждый раз одну и ту же информацию;
- т.к. куки передаются через HTTP, передаваемые данные не могут быть зашифрованы (исключение составляют SSL соединения);
- куки могут весить до 4Kb. Этого достаточно чтобы замедлить веб приложение, но не достаточно, чтобы принести существенную пользу.
А вот что нам действительно нужно. Хочу иметь:
- много места для хранения…
- на стороне клиента…
- дольше, чем до обновления страницы…
- и чтоб не передавалось на сервер.
Существуют 2 основных типа веб-хранилища: локальное хранилище (localStorage) и сохранение сессии (sessionStorage), ведущие себя соответственно "Стойким" Куки и Куки сессии[1].
Локальное хранилище и Сохранение сессии
Интернет-хранилище предлагает две различных области: Локальная память хранения и Сохранение сессии, которые отличаются по своим масштабам и времени жизни. Данные размещаются в отдельное для каждого домена локальное хранилище (оно доступно для всех скриптов из домена, который первоначально добавил данные) и сохраняются после закрытия браузера. Сессия сохраняется по принципу одна-страница-одно-окно и ограничивается жизнью данного окна, то есть для каждого открытого окна создается новая сессия, которая прекращает свое существование при закрытии окна и не зависит от домена открывшего ее. Сохранение сессии предназначено для предоставления отдельных экземпляров одного и того же веб-приложения для работы в разных окнах, не мешая друг другу[6]. В случае с Куки подобное становится крайне затруднительно или даже невозможно.
- На данный большинство современных браузеров поддерживают эту технологию:
- IE 8.0+
- Firefox 3.5+
- Safari 4.0+
- Chrome 4.0+
- Opera 10.5+
- iPhone 2.0+
- Android 2.0+
Использование
Для начала проверим, поддерживает ли клиент Local storage. Появился новый глобальный объект localStorage, отвечающий за локальное хранилище.
function isLocalStorageAvailable() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } }
Сохранение данных:
localStorage.setItem('foo', 'bar');
Извлечение данных:
var foo = localStorage.getItem('foo'); alert(foo); //bar
Можно использовать объектную нотацию для сохранения и извлечения данных:
localStorage['foo'] = 'bar'; var foo = localStorage['foo']; alert(foo); //bar
Удаление данных:
localStorage.removeItem('foo'); //удалит элемент объекта localStorage.clear(); //удалит все элементы
Может возникнуть проблема, если мы превысили ограничение размера локального хранилища. Обработаем это при помощи try/catch:
try { localStorage.setItem('foo', 'bar'); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Локальное хранилище переполнено'); } }
Стоит отметить, что сохранять можно только строковые данные. Иногда требуется сохранять объекты. Ничего не остается как воспользоваться сериализацией:
var foo = {1: [1, 2, 3]}; localStorage.setItem('foo', JSON.stringify(foo)); var fooFromLS = JSON.parse(localStorage.getItem('foo'));
Небольшой пример как можно использовать локальное хранилище. На сайте есть страница с табами, которые можно перетаскивать. Удобно если после изменения сохранится расстановка для текущего пользователя. «По-серверному» это можно осуществить сохранением позиций для каждого юзера в БД. Естественно, это очень накладно по производительности. А локальное хранилище будет делать это быстро и без участия сервера.
Синтаксис работы с Session Storage аналогичен синтаксису Local Storage. Сохранение данных Session Storage:
sessionStorage.setItem('foo', 'bar');