Xiper

Знакомство с 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');

Материалы