Матвей Земсков

Заметки веб-мастера

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

Мои заметки предназначены в основном для начинающих веб-мастеров. Несмотря на это, опытные разработчики также найдут здесь что-нибудь интересное для себя.

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

 
Понедельник, 25 января 2016 11:21

Lockr-библиотека для работы с LocalStorage

Оцените материал
(0 голосов)

Если вы разрабатываете сложное приложение на JavaScript, бывает очень полезным иметь возможность хранить различную информацию внутри браузера, для того чтобы она могла легко передаваться между различными страницами. В недавнем прошлом это можно было реализовать только при помощи cookie – небольших текстовых файлов, хранящихся на компьютере пользователя вашего приложения. Правда взаимодействовать с ними при помощи JavaScript было не очень удобно.

Хорошо, что сейчас существует технология под названием LocalStorage, которая похожа по функционалу на cookie, но имеет более удобный интерфейс для взаимодействия с данными.

На самом деле библиотек для работы с LocalStorage довольно много. В этой статье, я хочу привести пример использования одной из них. Этот инструмент называется Lockr и предназначен для облегчения взаимодействия с локальным хранилищем.

Это простая и легкая (около 2 kB в сжатом состоянии) библиотека позволит вам сохранять объекты, массивы и другие типы данных.

Вы можете скачать Lockr по ссылке с официальной страницы на GitHub или добавить ее в свой проект при помощи bower.

Теперь давайте познакомимся с инструментом поближе и посмотрим как использовать Lockr.

Сначала подключаем библиотеку к странице:

HTML

<script src="/path/to/lockr.js" type="text/javascript"></script>

Давайте попробуем что-нибудь сохранить в LocalStorage. Для этого используем метод Lockr.set(). Как вы можете видеть в метод передается 2 аргумента: первый — имя, второй — значение. Значение может быть различных типов: строка, число, объект или массив. Пример:

JavaScript

	Lockr.set('username', 'Coyote'); // Сохраняем строку
	Lockr.set('user_id', 12345); // Сохраняем число
	Lockr.set('users', [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]);

Итак, теперь можно получить ранее сохраненные данные из массива LocalStorage. Для этого воспользуемся методом Lockr.get(), в который передается только один аргумент — название ключа. Если значение равно null или undefined, то метод выводит значение по-умолчанию. Пример:

JavaScript

Lockr.get('username');
> "Coyote"

Lockr.get('user_id');
> 12345

Lockr.get('users');
>  [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]

Lockr.get('score', 0):
> 0

Lockr.set('score', 3):
Lockr.get('score', 0):
> 3

Ну что же, посмотрели данные, теперь можно их и удалить из массива LocalStorage. Для этого есть метод Lockr.rm() в который передается единственный аргумент — название ключа элемента из локального хранилища. Пример:

JavaScript

Lockr.set('username', 'Coyote'); // Сохраняем строку
Lockr.get('username');
> "Coyote"
Lockr.rm('username');
Lockr.get('username');
> undefined

Также вы можете добавить уникальное значение в уже существующий набор данных в LocalStorage, обратившись к нему по ключу. Для этого используем метод Lockr.sadd(), в который передаем 2 аргумента: ключ и значение. Значение может быть строкой, числом, массивом или объектом. Если передаваемое значение уже есть в наборе, то оно игнорируется.

Чтобы проверить присутствует ли в наборе определенное значение, воспользуйтесь методом Lockr.sismember(). В метод передается 2 аргумента — ключ и значение. Результат — true или false.

Пример:

JavaScript

Lockr.sadd("wat", 1);
Lockr.sismember("wat", 1); // true
Lockr.sismember("wat", 2); // false

Метод Lockr.srem() удаляет элемент из массива LocalStorage по ключу. Пример:

JavaScript

	Lockr.sadd("wat", 1);
	Lockr.sadd("wat", 2);
	Lockr.srem("wat", 1);
	Lockr.smembers("wat"); // [2]

Чтобы получить все значения, сохраненные в локальном хранилище, используйте метод Lockr.getAll(). Аргументов у этого метода нет.

Пример:

JavaScript

	Lockr.getAll();
	> ["Coyote", 12345, [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]]

Метод Lockr.flush() очищает LocalStorage. Как и предыдущий метод вызывается без аргументов.

JavaScript

	localStorage.length;
	> 3
	Lockr.flush();
	localStorage.length;
	> 0

Вот такими простыми методами вы можете управлять локальным хранилищем с помощью библиотеки Lockr. На мой взгляд — это вполне достойный инструмент, который можно добавить в свой арсенал. Конечно же, Lockr не единственная библиотека на JS для работы с LocalStorage. Как я писал выше, существует довольно много других, на которыми вы также можете ознакомиться. Правда, задачи, которые они выполняют, такие же как и у Lockr.

Прочитано 1017 раз
Другие материалы в этой категории:
Анимация title в браузере Парсинг CSV с помощью JavaScript
Добавить комментарий

Комментарии   

 
0 # Valera 13.03.2016 08:37
А какая из этих библиотек лучше?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 14.03.2016 10:16
Valera, полагаю, что разработчик решает сам какая библиотека лучше, попробовав разные варианты. Оценивает по разным критериям.
Ответить | Ответить с цитатой | Цитировать
 

Мои сертификаты «1С-Битрикс»

Свежие заметки
Последние комментарии