ホームページ > ウェブフロントエンド > jsチュートリアル > これら 8 つの JavaScript ライブラリを使用して、ローカル ストレージをより適切に処理してください。 !

これら 8 つの JavaScript ライブラリを使用して、ローカル ストレージをより適切に処理してください。 !

青灯夜游
リリース: 2020-11-25 18:02:13
転載
3615 人が閲覧しました

この記事では、ローカル ストレージをより適切に処理できる 8 つの JavaScript ライブラリを推奨します。一定の参考値があるので、困っている友達が参考になれば幸いです。

これら 8 つの JavaScript ライブラリを使用して、ローカル ストレージをより適切に処理してください。 !

現在のプロジェクト用にいくつかのローカル リポジトリをテストしました。どのような素晴らしい機能があるのか​​知りたいですか?読み続けて。

ローカル ストレージ ブリッジ

https://github.com/krasimir/lsbridge

同じブラウザ タブ内のあるタブから別のタブにメッセージを送信する必要がある場合は、難しい方法でやる必要はありません。ローカル ストレージ ブリッジは、タスクを簡単にするためにここにあります。

基本的な使用法:

// 发送
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

これら 8 つの JavaScript ライブラリを使用して、ローカル ストレージをより適切に処理してください。 !

##Basil.js は、セッション、localStorage、Cookie を統合して、簡単な方法を提供します。データを処理するため。

基本的な使用法:

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 他のものと同様データストレージについても同様です。しかし、それだけではありません。高度な機能の 1 つを使用すると、ブラウザーのサポートにさらに深くアクセスできるようになります。

基本的な使用法:

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

localStorage API に似ています。実際、これは localStorage のラッパーであり、HTML5 を使用して memcaches 関数をエミュレートします。上記のドキュメントでその他の機能を確認してください。

基本的な使用法:

lscache.set(‘name’, ‘Amy’, 5); // 数据将在5分钟后过期
lscache.get(‘name’);
ログイン後にコピー
Lockr

これら 8 つの JavaScript ライブラリを使用して、ローカル ストレージをより適切に処理してください。 !

Lockr は localStorage API に基づいて構築されています。これは、ローカル データをより簡単に操作するためのいくつかの便利な方法を提供します。

localStorage API の代わりにこのライブラリを使用する理由は何ですか?

そうですね、localStorage API では文字列のみを保存できます。数値を保存したい場合は、まず数値を文字列に変換する必要があります。 Lockr ではより多くのデータ型やオブジェクトさえも保存できるため、Lockr ではこのようなことは起こりません。

基本的な使用法:

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 は、Redis のようなソリューションを提供します。ローカルストレージ API。永続性が重要な場合は、エラーが発生した場合にデータの状態を維持するためにこのライブラリが必要になります。

基本的な使用法:

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

このシンプルで高速なライブラリは、IndexedDB または WebSQL を渡します。は、非同期ストレージを使用して、Web のオフライン エクスペリエンスを向上させます。これは localStorage に似ていますが、コールバック機能を備えています。

基本的な使用法:

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
  }
});
ログイン後にコピー
驚くべきことに、中国語のドキュメント (https://localforage.docschina.org/)

crypt.io

# が提供されていることです。 # #https://github.com/jas-/crypt.io

crypt.io は、標準の JavaScript 暗号化ライブラリを使用して、安全なブラウザ ストレージを実装します。 crypto.io を使用する場合、sessionStorage、localStorage、Cookie の 3 つのストレージ オプションがあります。

基本的な使用法:

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
});
ログイン後にコピー

他のローカル リポジトリをご存知ですか?なぜそれを使うのでしょうか?以下のコメント欄でお知らせください。

英語の元のアドレス: https://medium.com/javascript-in-plain-english/8-javascript-libraries-for-better-handling-local-storage-d8cd4a05dbfa

プログラミング関連の知識について詳しくは、
プログラミング ビデオ コース

をご覧ください。 !

以上がこれら 8 つの JavaScript ライブラリを使用して、ローカル ストレージをより適切に処理してください。 !の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート