Всем нам так или иначе приходится хранить какие-то данные на стороне клиента, пока тот ходит по нашему сайту. Способов для этого существует не мало, и, наверное, самый распространенный и старый — это печеньки (они же cookies). Но на дворе 21 век, и мир не стоит на месте, и уже существуют другие, более интересные и эффективные способы, среди которых есть LocalStorage & SessionStorage.
LocalStorage & SessionStorage можно назвать прямыми приемниками cookies. Они предоставляют простой и эффективный способ хранения строковых данных на стороне клиента. Плюсов у этого подхода по сравнению с кукисами как минимум несколько:
- Неудобство работы с кукисами. Конечно уже написаны сотни, если не тысячи оберток для удобной работы с кукисами, но это не отменяет того, что в итоге все сводится к тому, что есть document.cookie, которые потом сплитятся по ‘;’ на ключ=значение и затем вытаскиваются значения. С хранилищем все значительно проще — можно работать с ним как с обычным объектом.
- Все данные cookies передаются на сервер в виде заголовков при каждом запросе. Следовательно возрастает, пусть и не значительно, объем каждого передаваемого запроса/ответа. В случае использования хранилища такого нет, все хранится локально и ничего не передается.
- Размер куки ограничен 4 Kb, хранилище же, в разных браузерах по разному, но в любом случае этот размер исчисляется мегабайтами.
Вкратце хотелось бы сказать про отличие LocalStorage от SessionStorage.
- SessionStorage хранит данные для текущего окна. Это значит, что если вы закрыли окно, то все текущие данные, хранящиесе в SessionStorage теряются, даже если у вас открыто несколько окон с данным сайтом.
- LocalStorage сохраняет данные для домена. Следовательно, даже закрыв окно, вы ничего не потеряете. Откройте этот сайт снова, и все данные из LocalStorage снова вам доступны.
Так как же использовать хранилище? Да все очень просто!
Вариант №1. Использование свойства объекта.
// Установка ключа localStorage.username = 'Ivan'; ... // Чтение ключа output_text = 'Добро пожаловать, ' + localStorage.username;
Вариант №2. Использование квадратных скобок для доступа к свойствам объекта.
// Установка ключа localStorage['username'] = 'Ivan'; ... // Чтение ключа output_text = 'Добро пожаловать, ' + localStorage['username'];
Вариант №3. Использование API.
// Установка ключа
localStorage.setItem('username', 'Ivan');
...
// Чтение ключа
output_text = 'Добро пожаловать, ' + localStorage.getItem('username');
// Так же есть специальный метод для удаления ключа
localStorage.removeItem('username');
«И все так просто?», скажите вы, но как обстоят дела с поддержкой этого в разных браузерах?
И тут все не так уж и плохо, хранилище поддерживается в следующих браузерах:
- Firefox 3.5+
- Safari 4.0+
- Chrome 4.0+
- Opera 10.50+
- IE 8.0+
- Iphone 2.0+
- Android 2.0+
Ну и напоследок пара ссылок по теме, что называется:
- Local Storage — Dive into HTML5
- localStorage на quirksmode
- HTML5 — взгляд через призму безопасности. Заметка на Хабре.
Так что всем рекомендую использовать хранилище для хранения данных на стороне клиента.
П.С. Данная статья не претендует на полноценное описание LocalStorage & SessionStorage, она призвана просто показать, что это просто и удобно.