Use these 8 javascript libraries to handle local storage better! !

This article recommends 8 javascript libraries that can better handle local storage. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

I tested some local repositories for my current project. Want to know what cool features they have? continue reading.

Local Storage Bridge

https://github.com/krasimir/lsbridge

If you have to send a message from one tab to another in the same browser Tabs, you don't have to do it the hard way. The Local storage bridge is here to make the task easier.

Basic usage:

// 发送
lsbridge.send(‘app.message.error’, { error: ‘Out of memory’ });

// 监听
lsbridge.subscribe(‘app.message.error’, function(data) {
  console.log(data); // { error: ‘Out of memory’ }
});

Basil.js

##Basil.js unifies session, localStorage and cookies to provide you with a A straightforward way to process data.

Basic usage:

let basil = new Basil(options);

basil.set(‘name’, ‘Amy’);
basil.get(‘name’);
basil.remove(‘name’);
basil.reset();

store.js

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

Store.js like other things Same goes for data storage. But there's more, and one of its advanced features gives you deeper access to browser support.

Basic usage:

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

lscache

https://github.com/pamelafox/lscache

It is similar to the localStorage API. In fact, it is a wrapper around localStorage and emulates the memcaches function using HTML5. Discover more features in the documentation above.

Basic usage:

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

Lockr

Lockr is built on the localStorage API. It provides some useful methods to work with local data more easily.

What makes you want to use this library instead of the localStorage API?

Well, the localStorage API only allows you to store strings. If you want to store a number, you need to convert the number to a string first. This doesn't happen in Lockr because Lockr allows you to store more data types and even objects.

Basic usage:

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

Barn

https://github.com/arokor/barn

Barn provides a Redis-like solution on top of localStorage API. If persistence is important, then you will need this library to maintain data state in case an error occurs.

Basic usage:

let barn = new Barn(localStorage);

// 原始类型
barn.set(‘name’, ‘Amy’);
let name = barn.get(‘name’); // Amy

// List
barn.lpush(‘names’, ‘Amy’);
barn.lpush(‘names’, ‘James’);
let name1 = barn.rpop(‘names’); // Amy
let name2 = barn.rpop(‘names’); // James

localForage

https://github.com/localForage/localForage

This simple and fast library will pass IndexedDB or WebSQL uses asynchronous storage to improve the offline experience of the Web. It is similar to localStorage but with callback functionality.

Basic usage:

localforage.setItem(‘name’, ‘Amy’, function(error, value) {
  // Do something
});

localforage.getItem(‘name’, function(error, value) {
  if (error) {
    console.log(‘an error occurs’);
  } else {
    // Do something with the value
  }
});

The amazing thing is that it provides Chinese documentation (https://localforage.docschina.org/)

crypt.io

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

crypt.io uses standard JavaScript encryption libraries to implement secure browser storage. When using crypto.io, you have three storage options: sessionStorage, localStorage or cookies.

Basic usage:

let storage = crypto;
let book = { title: ‘JavaScript’, price: 13 };

storage.set(‘book’, book, function(error, results) {
  if (error) {
    throw error;
  }
  
  // Do something
});

storage.get(‘book’, function(error, results) {
  if (error) {
    throw error;
  }
  // Do something
});

Do you know of any other local repositories? Why use it? Let me know in the comments below!

English original address: https://medium.com/javascript-in-plain-english/8-javascript-libraries-for-better-handling-local-storage-d8cd4a05dbfa

For more programming-related knowledge, please visit:

Programming Video Course! !

The above is the detailed content of Use these 8 javascript libraries to handle local storage better! !. For more information, please follow other related articles on the PHP Chinese website!