9 библиотек JavaScript для работы с локальным хранилищем

 // set a greeting with a 2 minute expiration
lscache.set('greeting', 'Hello World!', 2);

// get and display the greeting
console.log(lscache.get('greeting'));

// remove the greeting
lscache.remove('greeting');

// flush the entire cache of items
lscache.flush();

// flush only expired items
lscache.flushExpired();

Как и предыдущая библиотека, эта также заботится о сериализации, поэтому вы можете хранить и извлекать объекты:

 lscache.set('website', {
  'name': 'SitePoint',
  'category': 'CSS'
}, 4);

// retrieve data from the object
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);

И, наконец, lscache позволяет разбивать данные на «сегменты». Посмотрите на этот код:

 lscache.set('website', 'SitePoint', 2);
console.log(lscache.get('website')); // 'SitePoint'

lscache.setBucket('other');
console.log(lscache.get('website')); // null

lscache.resetBucket();
console.log(lscache.get('website')); // 'SitePoint'

Обратите внимание, что во втором журнале результат равен null Это потому, что я установил пользовательское ведро до регистрации результата. После того, как я установил корзину, все, что было добавлено в lscache до этой точки, будет недоступно, даже если я попытаюсь очистить его. Только предметы в «другом» ведре являются доступными или сбрасываемыми. Затем, когда я перезагружаю ведро, я снова могу получить доступ к своим исходным данным.

secStore.js

secStore.js — это API для хранения данных, который добавляет дополнительный уровень безопасности с помощью крипто-библиотеки Stanford Javascript . secStore.js позволяет вам выбрать способ хранения: localStorage, sessionStorage или cookie. Чтобы использовать secStore.js, вы также должны включить вышеупомянутую библиотеку sjcl.js.

Вот пример, демонстрирующий, как сохранить некоторые данные с параметром encrypt

 var storage = new secStore;
var options = {
    encrypt: true,
      data: {
        key: 'data goes here'
      }
    };

storage.set(options, function(err, results) {
  if (err) throw err;
  console.log(results);
});

Обратите внимание на используемый метод set() Затем мы можем использовать метод get()

 storage.get(options, function(err, results) {
  if (err) throw err;
  console.log(results.key); // Logs: "data goes here"
});

Если вы хотите использовать сессионное хранилище или файлы cookie вместо локального хранилища с secStore.js, вы можете указать это в параметрах:

 var options = {
  encrypt: true,
  storage: 'session', // or 'cookies'
  data: {
    key: 'data here'
  }
};

localForage

Эта библиотека, созданная Mozilla, предоставляет простой API-интерфейс, подобный localStorage, но использует асинхронное хранилище через IndexedDB или WebSQL. API точно такой же, как localStorage ( getItem()setItem()

Так, например, если вы установите или получите значение, вы не получите возвращаемое значение, но вы можете работать с данными, которые передаются в функцию обратного вызова, и (необязательно) иметь дело с ошибками:

 localforage.setItem('key', 'value', function(err, value) {
  console.log(value);
});

localforage.getItem('key', function(err, value) {
  if (err) {
    console.error('error message...');
  } else {
    console.log(value);
  }
});

Некоторые другие пункты на местном кормлении:

• Поддерживает использование обещаний JavaScript
• Как и в других библиотеках, не только для хранения строк, но вы можете устанавливать и получать объекты
• Позволяет установить информацию базы данных с помощью метода config()

Basil.js

Basil.js описывается как унифицированный localStorage, sessionStorage и cookie API и включает в себя некоторые уникальные и очень простые в использовании функции. Основные методы могут быть использованы, как показано здесь:

 basil = new Basil(options);

basil.set('foo', 'bar');
basil.get('foo');
basil.remove('foo');
basil.reset();

Вы также можете использовать Basil.js, чтобы проверить, доступен ли localStorage:

 basil.check('local'); // returns Boolean value

Basil.js также позволяет вам использовать куки или sessionStorage:

 basil.cookie.set(key, value, { 
  'expireDays': days, 'domain': 'mydomain.com'
});
basil.cookie.get(key);

basil.sessionStorage.set(key, value);
basil.sessionStorage.get(key);

Наконец, в объекте optionsoptions

• Пространства имен для разных частей ваших данных
• Приоритетный порядок использования метода хранения
• Метод хранения по умолчанию
• Срок годности для файлов cookie.

 options = {
  namespace: 'foo',
  storages: ['cookie', 'local'],
  storage: 'cookie',
  expireDays: 31
};

LZ-строка

Утилита lz-string позволяет хранить большие объемы данных в localStorage с использованием сжатия, и ее довольно просто использовать. Включив библиотеку на свою страницу, вы можете сделать следующее:

 var string = 'A string to test our compression.';
console.log(string.length); // 33
var compressed = LZString.compress(string);
console.log(compressed.length); // 18
string = LZString.decompress(compressed);

Обратите внимание на использование методов compress()decompress() Комментарии в приведенном выше коде показывают значения длины до и после сжатия. Вы можете увидеть, насколько это выгодно, если посмотреть, как хранилище на стороне клиента всегда имеет ограниченное пространство.

Как объясняется в документации к библиотеке , есть опции для сжатия данных в Uint8Array (новый тип данных в JavaScript) и даже возможность сжатия данных для хранения вне клиента.

Похвальные грамоты

Вышеуказанные инструменты, вероятно, помогут вам сделать все, что вы хотите в localStorage, но если вы ищете больше, вот еще несколько связанных инструментов и библиотек, которые вы, возможно, захотите проверить.

• LokiJS — быстрое, ориентированное на память хранилище данных для документов для node.js, браузера и Cordova.
• Клиентское хранилище для AngularJS — Пространство клиентских пространств имен для Angular JS. Пишет в localStorage, с резервным файлом cookie. Нет внешних зависимостей, кроме Angular Core; не зависит от ngCookies.
• AlaSQL.js — база данных JavaScript SQL для браузера и Node.js. Обрабатывает как традиционные реляционные таблицы, так и вложенные данные JSON (NoSQL). Экспорт, хранение и импорт данных из localStorage, IndexedDB или Excel.
• angular-locker — простая и настраиваемая абстракция для локального / сессионного хранилища в угловых проектах, обеспечивающая гибкий и мощный API-интерфейс.
• jsCache — включает кэширование файлов JavaScript, таблиц стилей CSS и изображений с помощью localStorage.
• LargeLocalStorage — преодолевает различные недостатки браузера, предлагая большое хранилище значения ключа на клиенте.

Знаешь других?

Если вы создали что-то поверх API-интерфейса localStorage или связанного с ним инструмента, улучшающего хранилище на стороне клиента, сообщите нам об этом в комментариях.