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

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

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

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

Оцените материал
(1 Голосовать)

Если вы разрабатываете сложное приложение на 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.

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

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх