Local Web Storage -- интересная и эффективная фича HTML5, призванная заменить cookies

Наверняка вы уже сумели заметить: HTML5 стал весьма популярен. Создаются великолепные игры с использованием холстов (canvas), медиа-контент, ориентирующийся на различные устройства. Веб-разработка проделала немалый путь от iFrames 1990-х. В этой статье поделимся с вами советами по работе с одной очень полезной фичей HTML5: локальное хранилище (Local Web Storage) – возможно, настоящий святой грааль веб-разработки.

Раньше (а в большинстве случаев, и до сих пор) сайты сохраняли информацию о выбранных пользователем параметрах, используя cookies. Ориентируясь на эту информацию, сайт выглядел по-разному для разных пользователей, т.е. был кастомизирован. Например, при первом посещении сайта вы могли выбрать язык сайта, а когда бы вы зашли на эту же страницу снова, вам не пришлось бы делать этот выбор заново. Аналогично работают выбор темы, цветовой схемы, чекбоксы «Запомнить меня» и т.д. Функциональность cookies была неимоверно важна, но часто неэффективна.

Чем плохи cookies?

Можно перечислить несколько недостатков использования cookies: например, ограниченный размер (4 KB) и трудности, связанные с вопросом сохранения неприкосновенности личной информации при работе с незашифрованными cookies. Но я уверен, что основная проблема при использовании cookies — это накладные расходы.

Так, если даже вы сильно ограничиваете объем сохраняемой на компьютере пользователя информации, то, наблюдая рост количества пользователей вашего сервиса, вы также заметите, что передаете огромное количество информации по протоколу HTTP (что, пожалуй, может отрицательно сказаться на размере вашего кошелька). Cookies сохраняются на устройстве, и, хотя в масштабах одного пользователя объем передаваемых данных совсем небольшой, при работе с большим количеством пользователей объем загружаемых серверами данных неприятно удивит вас.

Что же может стать решением? HTML5 и реализованное в нем локальное хранилище.

HTML5 предоставляет возможность странице взаимодействовать с локальными данными пользователя прямо из браузера, а не посредством обмена этими данными с сервером. И поэтому, из-за отсутствия необходимости передавать информацию с жесткого диска на сервер, возможно увеличивать объем сохраняемых настроек пользователя до 5MB!

Примеры

Давайте рассмотрим, как же просто взаимодействовать с локальным хранилищем посредством JavaScript:

			<script type="text/javascript">
    localStorage.setItem('preferredLanguage', 'EN');
</script>
		

Вот так-то! Мы добавили новую переменную, сохранившую настройки пользователя в локальном хранилище. И когда пользователь снова зайдет на сайт, просто получим значение этой переменной:

			<script type="text/javascript">
    localStorage.getItem('preferredLanguage');
</script>
		

После прочтения всего написанного выше в этом посте, вы, наверное, удивлены тем, как же просто это реализуется. Так в том-то и дело! Именно простота в написании кода становится одним из главных доводов в пользу использования HTML5 Local Storage. Занесение нового значения и получение его заняло всего несколько строчек кода. Если же вы хотите дать значению этой переменной некоторый срок годности, по истечении которого это значение необходимо будет очистить, то само удаление будет выглядеть так:

			<script type="text/javascript">
    localStorage.removeItem('preferredLanguage');
</script>
		

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

Как известно, любой объект можно превратить в строку с помощью определенных методов. Именно это мы и используем:

			<script type="text/javascript">
    var user = {};
    user.name = 'CWolff';
    user.job = 'Software Engineer II';
    user.rating = 'Awesome';
    //If we were to stop here, the entry would only read as [object Object] when we try to retrieve it, so we stringify with JSON!
    localStorage.setItem('user', JSON.stringify(user));
    //Retrieve the object and assign it to a variable
    var getVar = JSON.parse(localStorage.getItem('user'));
    //We now have our object in a variable that we can play with, let's try it out
    alert(getVar.name);
    alert(getVar.job);
    alert(getVar.rating);
</script>
		

Что ж, попробуйте поработать с локальным хранилищем, и вы избавитесь от огромных накладных расходов!