banner.jpeg

我为当前项目测试了一些本地存储库。想知道他们有什么很棒的功能吗?继续阅读。

Local Storage Bridge

https://github.com/krasimir/lsbridge

如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页,你不必用艰难的方式。Local storage bridge在这里让任务变得更简单。

基本使用:

  1. // 发送
  2. lsbridge.send(‘app.message.error’, { error: Out of memory });
  3. // 监听
  4. lsbridge.subscribe(‘app.message.error’, function(data) {
  5. console.log(data); // { error: ‘Out of memory’ }
  6. });

Basil.js

1.png

Basil.js统一了session、localStorage和cookie,为你提供了一种处理数据的直接方法。

基本使用:

  1. let basil = new Basil(options);
  2. basil.set(‘name’, Amy’);
  3. basil.get(‘name’);
  4. basil.remove(‘name’);
  5. basil.reset();

store.js

https://github.com/marcuswestin/store.js

Store.js像其他东西一样处理数据存储。但还有更多的功能,它的一个高级特性是让你更深入地访问浏览器支持。

基本使用:

  1. store.set(‘book’, { title: JavaScript }); // Store a book
  2. store.get(‘book’); // Get stored book
  3. store.remove(‘book’); // Remove stored book
  4. store.clearAll(); // Clear all keys

lscache

https://github.com/pamelafox/lscache

它与localStorage API类似。事实上,它是localStorage的一个封装器,并使用HTML5模拟memcaches函数。在上面的文档中发现更多的功能。

基本使用:

  1. lscache.set(‘name’, Amy’, 5); // 数据将在5分钟后过期
  2. lscache.get(‘name’);

Lockr

2.png

Lockr建立在localStorage API之上。它提供了一些有用的方法来更轻松地处理本地数据。

是什么让你要使用此库而不是localStorage API?

好吧,localStorage API仅允许你存储字符串。如果要存储数字,则需要先将该数字转换为字符串。在Lockr中不会发生这种情况,因为Lockr允许你存储更多的数据类型甚至对象。

基本使用:

  1. Lockr.set(‘name’, Amy’);
  2. Lockr.set(‘age’, 28);
  3. Lockr.set(‘books’, [{title: JavaScript’, price: 11.0}, {title: Python’, price: 9.0}]);

Barn

https://github.com/arokor/barn

Barn在localStorage之上提供了一个类似Redis的API。如果持久性很重要,那么你将需要这个库来保持数据状态,以防发生错误。

基本使用:

  1. let barn = new Barn(localStorage);
  2. // 原始类型
  3. barn.set(‘name’, Amy’);
  4. let name = barn.get(‘name’); // Amy
  5. // List
  6. barn.lpush(‘names’, Amy’);
  7. barn.lpush(‘names’, James’);
  8. let name1 = barn.rpop(‘names’); // Amy
  9. let name2 = barn.rpop(‘names’); // James

localForage

https://github.com/localForage/localForage

这个简单而快速的库将通过IndexedDB或WebSQL使用异步存储来改善Web的脱机体验。它类似于localStorage,但具有回调功能。

基本使用:

  1. localforage.setItem(‘name’, Amy’, function(error, value) {
  2. // Do something
  3. });
  4. localforage.getItem(‘name’, function(error, value) {
  5. if (error) {
  6. console.log(‘an error occurs’);
  7. } else {
  8. // Do something with the value
  9. }
  10. });

很神奇的是它提供中文文档

crypt.io

https://github.com/jas-/crypt.io

crypt.io使用标准JavaScript加密库实现安全的浏览器存储。使用crypto.io时,有三个存储选项:sessionStorage,localStorage或cookie。

基本使用:

  1. let storage = crypto;
  2. let book = { title: JavaScript’, price: 13 };
  3. storage.set(‘book’, book, function(error, results) {
  4. if (error) {
  5. throw error;
  6. }
  7. // Do something
  8. });
  9. storage.get(‘book’, function(error, results) {
  10. if (error) {
  11. throw error;
  12. }
  13. // Do something
  14. });

你还知道其他本地存储库吗?为什么使用它?在下面的评论中让我知道!


原文:https://medium.com/javascript-in-plain-english/
作者:Amy J. Andrews
翻译:公众号《前端全栈开发者》