Удобная работа с LocalStorage. Ну и с SessionStorage заодно

в 14:59, , рубрики: breeze, html5, javascript, localStorage, sessionstorage, метки: , , ,

Хочу представить вашему вниманию библиотеку для удобной работы с Local и Session Storage. Она появилась, как побочный продукт работы над проектом и содержит несколько довольно удобных функций. Библиотека поддерживает все современные браузеры, а именно:

  • Internet Explorer 8+
  • Mozilla Firefox 3.5+
  • Google Chrome 4+
  • Safari 4+
  • Opera 10.5+

Помимо традиционных — set/get/inc/dec, есть набор удобных «вкусностей»:

  • inc работает со строками
  • extend для объектов
  • много методов для работы с массивами
    • обычные append/prepend/takeLast/takeFirst/getLast/getFirst
    • с проверкой уникальности — .appendUnique/.prependUnique
    • во все append/prepend методы можно передавать лимит — удобно для организации MRU списков
  • calls chaining — я от него в восторге :)

Если заинтересовал — прошу под кат за примерами. Мне кажется они достаточно хорошо показывают возможности библиотеки.

br.storage.get('foo', 'bar');
// bar

br.storage.set('foo', 'bar2').get('foo');
// bar2

br.storage.set('boolean', true).get('boolean');
// true

br.storage.set('integer', 666).get('integer');
// 666

br.storage.set('val', 10).inc('val', 5).inc('val').get('val');
// 16

br.storage.set('val', 10).dec('val', 5).dec('val').get('val');
// 4

br.storage.set('colors', 'red').inc('colors', 'white').inc('colors', 'blue').get('colors');
// red, white, blue 

br.storage.set('tags', 'storage').inc('tags', 'html5', ' ').inc('tags', 'local', ' ').get('tags');
// storage html5 local 

br.storage.clear().set('one', 1).set('two', 2).set('three', 3).get(['one', 'two', 'three']);
// { one: 1, two: 2, three: 3 }

br.storage.set('array', [1, 2, 3, 4, 5]).get('array');
// [1, 2, 3, 4, 5]

br.storage.set({prop1: 'val1', prop2: 'val2' }).get('prop2');
// val2

br.storage.remove('prop1').get('prop2');
// val2

br.storage.set({prop1: 'val1', prop2: 'val2' }).get(['prop1', 'prop2']);
// { prop1: "val1",  prop2: "val2" }

br.storage.remove(['prop1', 'prop2']).get('prop1');
// null

br.storage.set('object', { prop1: 'one', prop2: 'two' }).get('object');
// { prop1: "one", prop2: "two" }

br.storage.set('delicious', true).get('delicious');
// true

br.storage.not('delicious').get('delicious');
// false

br.storage.set('array', [1, 2, 3]).append('array', 4).get('array');
// [1, 2, 3, 4] 

br.storage.set('array', [1, 2, 3]).prepend('array', 4).get('array');
// [4, 1, 2, 3] 

br.storage.set('array', [1, 2, 3]).takeLast('array');
// 3

br.storage.get('array');
// [1, 2]

br.storage.set('array', [1, 2, 3]).takeFirst('array');
// 1

br.storage.get('array');
// [2, 3]

br.storage.set('array', [1, 2, 3]).getLast('array');
// 3

br.storage.get('array');
// [1, 2, 3]

br.storage.set('array', [1, 2, 3]).getFirst('array');
// 1

br.storage.get('array');
// [1, 2, 3]

br.storage.set('object', { prop1: 'one' }).extend('object', { prop2: 'two' }).get('object');
// { prop1: "one", prop2: "two" }

br.storage.set('object', { prop1: 'one' }).extend('object', { prop2: 'two', prop3: 'three' }).get('object');
// { prop1: "one", prop2: "two", prop3: "three" }

br.storage.set('array', [1, 2, 3]).each('array', function(value) { value; };
// 1
// 2
// 3

br.storage.set('array', [1, 2, 3]).appendUnique('array', 1).appendUnique('array', 4).get('array');
// [2, 3, 1, 4] 

br.storage.set('array', [1, 2, 3]).prependUnique('array', 1).prependUnique('array', 4).get('array');
// [4, 1, 2, 3] 

br.storage.set('array', [1, 2, 3]).append('array', 4, 3).get('array');
// [2, 3, 4]

br.storage.set('array', [1, 2, 3]).prepend('array', 4, 3).get('array');
// [4, 1, 2]

br.storage.all();
// { array: [2, 3]
// , boolean: true
// , colors: "red, white, blue"
// , delicious: false
// , foo: "bar2"
// , integer: 666
// , object: { prop1: "one", prop2: "two", prop3: "three" }
// , one: 1
// , tags: "storage html5 local"
// , three: 3
// , two: 2
// }

Все тоже самое работает и для sessionStorage через br.session.

Скачать библиотеку можно https://github.com/jagermesh/breeze. Критика приветствуется :)

Автор: jagermesh

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js