На самом деле библиотек для работы с 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.