Хранилище на стороне клиента
А теперь поговорим об абсолютно новой теме: хранилище на стороне клиента в HTML5. На сегодняшний день мы имеем невеликий выбор средств для хранения данных у пользователя. Наиболее распространенным способом стала скромная куки-сессия. Но этому методу сопутствует множество маленьких проблем. И самые выматывающие из них – это следующие:
• Данные, которые вы сохраняете в сессии, перемещаются туда и обратно между клиентом и сервером при каждом запросе.
• Данные, которые вы сохраняете, имеют лимит в 4 kB.
• Все куки ограничены во времени.
Впрочем, с использованием куки все обстоит не так уж плохо. Куки – то, что сохраняет данные пользователя для регистрации на сайте и помогает серверу идентифицировать его. Ясно, что нам нужны и другие варианты для сохранения данных. К счастью, у нас есть фантастическое решение в локальном и сессионном хранилище. Что это? Рад, что вам интересно.
С >localStorage и >sessionStorage, у нас есть два JavaScript API для сохранения строк для браузера. >SessionStorage очищается, когда заканчивается сеанс пользователя (т. е. когда «вкладка» или «браузер» закрываются), а в это время >localStorage хранится, пока разработчик (через JavaScript) или пользователь (через свои браузерные настройки) не решают удалить его.
Интерфейсы API виртуально идентичны – единственная разница будет в сроках хранения. Откройте свою панель инструментов разработчика в современном браузере (имеется в виду выпуска последних трех лет).
Введите >localStorage.setItem (“name”, “Ben”). В Webkit-браузерах вы увидите мое имя, сохраненное под вкладкой «Ресурсы» (для этого вам нужно будет раскрыть “Local Storage”). Вы только что сохранили свой первый элемент данных в >localStorage.
А теперь давайте извлечем то, что вы сохранили, используя >localStorage.getItem(“name”). Вы увидите “Ben”, четко напечатанное в консоли.
И, наконец, чтобы очистить все после себя, воспользуйтесь либо >localStorage.deleteItem(“name”), чтобы удалить мое имя, либо >localStorage.clear(), чтобы убрать все из >localStorage. Когда пользователи вызовут >localStorage.clear(), они лишь очистят его для текущего домена.
Итак, если пользователь сохраняет какие-либо данные на сайте, расположенном на example.com, а потом переключают вкладки на google.com, они увидят, что у них нет доступа к данным, сохраненным ими на вкладке example.com.
Интерфейс >localStorage – чрезвычайно полезная штука. Допустим, вы создаете Twitter-клиент и хотите, чтобы он мог делать следующее: