LocalStorage. Локальное хранилище на HTML5.
Привет всем! В этой статье мы разберем, что такое localStorage и как его использовать.
Введение
LocalStorage - локальное хранилище. Т.е. это специально отведенное место в браузере(что-то вроде небольшой базы данных), где мы можем записывать, читать и удалять какие-то данные. На самом деле, локальное хранилище очень похоже на COOKIE, но есть отличия. Вот давайте о них и поговорим. Cookie очень ограничены. В одной cookie может быть всего 4096 символов, а их количество на один домен примерно 30-50 в зависимости от браузера. В локальном хранилище мы можем хранить 5-10мб или даже больше на длительное время.
Где их использовать
Самое большое отличие cookie от localStorage - это то, что первый работает с сервером, а второй нет, хотя это тоже можно сделать, но об этом немного позже. Используйте локальное хранилище там, где вам не нужна тесная работа с сервером, а нужно хранить какие-то временные данные. К примеру, представим, что вы создаете какое-то web-приложение, куда человек может зайти, ввести несколько задач, которые он хочет сделать за день и удалить те, которые уже выполнил. Зачем нам тут сервер? Правильно, не за чем. Вот тут и стоит использовать localStorage. Человек заходит, вводит задачи, они записываются в специальное место его браузера и там хранятся. Когда человек зайдет снова через какое-то время, они будут оттуда выбраны и показаны. К примеру, кликнув по задаче, она будет удаляться с локального хранилища и, следовательно, показываться ему уже не будет. Перейдем к тому, как его использовать.
Как использовать localStorage
Хранятся данные также, как и в cookie - ключ:значение. Чтобы добавить новое значение, напишите так:
localStorage.setItem('ключ', 'значение');
Мы используем объект localStorage и его метод setItem, куда передаем ключ и значение.
Чтобы получить данные, пишем следующее:
var value = localStorage.getItem('ключ');
В результате, в переменную value попадет значение, которое хранится под ключом, который мы передаем в метод getItem.
Удаляем данные
localStorage('ключ'); // удалит данные под переданным ключом
localStorage.clear(); // полностью очистит локальное хранилище
Чтобы проверить, не переполнено ли локальное хранилище, вы можете использовать константу QUOTA_EXCEEDED_ERR
try {
localStorage.setItem('ключ', 'значение');
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Превышен лимит');
}
}
Вот и все, что следует знать про localStorage. Стоит сказать, что помимо этого объекта есть еще один - sessionStorage. Отличается он только тем, что хранит данные только для одной вкладки, и они будут удалены, как только пользователь закроет вкладку.
В начале статьи я говорил, что локальное хранилище создано для того, чтобы хранить локальные данные и не общаться с сервером, но, однако, такая возможность у нас все же есть. Думаю, некоторые уже могли догадаться, как это сделать. Итак, если вам нужно отправить какие-то данные на сервер, то сделайте следующее: получите данные из локального хранилища, преобразуйте их в JSON строку и отправьте с помощью технологии Ajax. Так же можно их и принимать от сервера.
Итог
Итак, используйте localStorage там, где вам не нужно общаться с сервером, а нужно хранить данные локально, в браузере у пользователя. Все, что вам для этого нужно, мы рассмотрели в этой статье. Спасибо за внимание и до скорого!
-
Создано 29.05.2014 20:03:50
-
Михаил Русаков
Комментарии (1):
В общем ошибка тут в удалении ключа. Написано: localStorage('ключ'); А нужно вот так: localStorage.removeItem(‘ключ’);
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.