Перейти к содержимому

23.12.2010

3

Прощайте, Cookies или здравствуй, LocalStorage!

Всем нам так или иначе приходится хранить какие-то данные на стороне клиента, пока тот ходит по нашему сайту. Способов для этого существует не мало, и, наверное, самый распространенный и старый — это печеньки (они же cookies). Но на дворе 21 век, и мир не стоит на месте, и уже существуют другие, более интересные и эффективные способы, среди которых есть LocalStorage & SessionStorage.

LocalStorage & SessionStorage можно назвать прямыми приемниками cookies. Они предоставляют простой и эффективный способ хранения строковых данных на стороне клиента. Плюсов у этого подхода по сравнению с кукисами как минимум несколько:

  1. Неудобство работы с кукисами. Конечно уже написаны сотни, если не тысячи оберток для удобной работы с кукисами, но это не отменяет того, что в итоге все сводится к тому, что есть document.cookie, которые потом сплитятся по ‘;’ на ключ=значение и затем вытаскиваются значения. С хранилищем все значительно проще — можно работать с ним как с обычным объектом.
  2. Все данные cookies передаются на сервер в виде заголовков при каждом запросе. Следовательно возрастает, пусть и не значительно, объем каждого передаваемого запроса/ответа. В случае использования хранилища такого нет, все хранится локально и ничего не передается.
  3. Размер куки ограничен 4 Kb, хранилище же, в разных браузерах по разному, но в любом случае этот размер исчисляется мегабайтами.

Вкратце хотелось бы сказать про отличие LocalStorage от SessionStorage.

  • SessionStorage хранит данные для текущего окна. Это значит, что если вы закрыли окно, то все текущие данные, хранящиесе в SessionStorage теряются, даже если у вас открыто несколько окон с данным сайтом.
  • LocalStorage сохраняет данные для домена. Следовательно, даже закрыв окно, вы ничего не потеряете. Откройте этот сайт снова, и все данные из LocalStorage снова вам доступны.

Так как же использовать хранилище? Да все очень просто!
Вариант №1. Использование свойства объекта.

Вариант №2. Использование квадратных скобок для доступа к свойствам объекта.

Вариант №3. Использование API.

«И все так просто?», скажите вы, но как обстоят дела с поддержкой этого в разных браузерах?
И тут все не так уж и плохо, хранилище поддерживается в следующих браузерах:

  • Firefox 3.5+
  • Safari 4.0+
  • Chrome 4.0+
  • Opera 10.50+
  • IE 8.0+
  • Iphone 2.0+
  • Android 2.0+

Ну и напоследок пара ссылок по теме, что называется:

Так что всем рекомендую использовать хранилище для хранения данных на стороне клиента.
П.С. Данная статья не претендует на полноценное описание LocalStorage & SessionStorage, она призвана просто показать, что это просто и удобно.

  • Скажите, пожалуйста, как быть с ошибкой в IE 11 (хотя бы)? Ругается на невозможность получить доступ к localStorage, в то время как sessionStorage принимает и работает с ним. Проблема моей ОС или же общая? Как решается?

  • Мимопроходил

    Раз уж эта страница гуглится — напишу тут.
    Есть некоторые проблемы в реализации local/sessionStorage в различных браузерах. В частности, есть вероятность наткнуться на одну особенность, когда на каждую страницу (вкладку) создаётся своя изолированная инстанция Storage. Это было замечено в Хроме (~10 версии, для localStorage) и в Опере (12 версии, для sessionStorage) при кросс-доменной работе со страницами для разных поддоменов с одним наддоменом ( http://www.site.ru, chat.site.ru, наддомен site.ru ). Думаю проблема из-за неверно определяемой Origin Policy, даже если document.domain был выставлен праивльно. Следствие этого — засерание памяти и диска.

  • Мимопроходил

    PS. При работе с несколькими вкладками на едином домене ( site.ru ) — такой проблемы не было замечено.