9ローカルストレージを操作するためのJavaScriptライブラリ

HTML5ローカルストレージAPI（Webストレージの一部）は優れたブラウザーサポートを備えており、ますます多くのアプリケーションに適用されています。単純なAPIがありますが、Cookieに似たいくつかの欠点もあります。

過去1年ほどでローカルストレージAPIを使用して、かなりの数のツールとライブラリに遭遇したので、いくつかのコードの例と機能の議論を使用して、この投稿にそれらを整理しました。

キーポイント

• HTML5ローカルストレージAPIは広くサポートされており、アプリケーションでますます一般的になりつつありますが、Cookieと同様のいくつかの制限もあります。さまざまなJavaScriptライブラリが開発され、機能を改善および拡張しています。
• lockr、store.js、およびlscacheは、LocalStorage APIのラッパーを提供し、追加の使用方法と機能を提供します。これらには、手動変換、より深いブラウザーサポート、およびMemcached Memoryオブジェクトキャッシュシステムのシミュレーションなしでさまざまなデータ型を保存することが含まれます。
• secstore.jsとlocalforageは、より専門的な機能を提供します。 Secstore.jsは、Stanford JavaScript Crypto Libraryを通じてセキュリティの層を追加し、Mozillaが構築したLocalforageは、IndexEdDBまたはWebQLを使用して非同期ストレージAPIを提供します。
• basil.jsやlz-stringなどの他のライブラリは、ユニークな機能を提供します。 Basil.jsは、統一されたLocalStorage、SessionStorage、およびCookie APIで、名前空間、ストレージメソッドの優先順位、およびデフォルトストレージを定義できるようにします。 LZ弦により、圧縮を介してLocalStorageで大量のデータを保存できます。

lockr

LockRは、多くの便利な方法と機能を使用できるLocalStorage APIのラッパーです。たとえば、LocalStorageは文字列の保存に限定されていますが、LockRを使用すると、自分で変換することなくさまざまなデータ型を保存できます。

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

その他の関数には以下が含まれます

lockr.get（）メソッドを使用して、すべてのキー値ペアを取得

• lockr.getAll（）メソッドを使用して、すべてのキー値ペアを配列にコンパイルします
• lockr.flush（）メソッドを使用して、すべての保存されているキー価値ペアをすべて削除します
• lockr.saddおよびlockr.srem
を使用してハッシュキーの下に値を追加/削除します

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

同じブラウザのタブ間のメッセージ交換を容易にするために、ローカルストレージを通信チャネルとして使用するための1kbライブラリ。ライブラリが含まれたら、使用できるサンプルコードを次に示します。

示されているように、send（）メソッドはメッセージを作成および送信し、subscribe（）メソッドを使用すると、指定されたメッセージを聞くことができます。このブログ投稿でライブラリの詳細を読むことができます。

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

barn

このライブラリは、LocalStorageの上に「高速で霧化された永続的なストレージ層」を提供するRedisのようなAPIを提供します。以下は、リポジトリのreadmeから取得したサンプルコードスニペットです。利用可能な多くの方法を示しています。

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

APIのその他の機能には、開始/終了値を使用して範囲を取得し、アイテム配列を取得し、データストア全体を圧縮してスペースを節約する機能が含まれます。このレポは、すべてのメソッドとその機能への完全な参照が含まれています。

store.js

これはLockRに似た別のラッパーですが、今回はフォールバックを通じてより深いブラウザのサポートを提供します。 Readmeは、「Store.jsは利用可能なときにLocalStorageを使用し、IE6およびIE7のユーザーDataの動作に戻ります。ページの読み込みを遅くするためのフラッシュはありません。ネットワークリクエストの負担を増やすクッキーはありません。」

基本的なAPIは、次のコードのコメントで説明されています。

さらに、さらに高度な機能がいくつかあります：

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

GithubリポジトリのReadmeは、ブラウザのサポートの深さと潜在的なバグと落とし穴の詳細を検討する必要があります（たとえば、一部のブラウザでは、プライバシーモードでローカルストレージを許可しません）。

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

lscache

lscacheは別のLocalStorageラッパーですが、いくつかの追加機能があります。単純なローカルストレージAPIとして使用するか、Memcached（メモリオブジェクトキャッシュシステム）のエミュレート機能を使用できます。 lscacheは次の方法を公開します。これはコードのコメントで説明されています。

前のライブラリと同様に、このライブラリもシリアル化を処理しているため、オブジェクトを保存および取得できます。

最後に、Lscacheを使用すると、データを「バケット」に分割できます。このコードをチェックしてください：

// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

// 获取'website'
store.get('website');

// 删除'website'
store.remove('website');

// 清除所有键
store.clear();

2番目のログでは、結果はnullであることに注意してください。これは、結果を記録する前にカスタムバケットをセットアップしたためです。バケツをセットアップしたら、リフレッシュしようとしても、これがアクセスできない前にlscacheに追加されるものはありません。 「他の」バケツのアイテムのみがアクセス可能またはリフレッシュ可能です。その後、バケットをリセットすると、元のデータに再びアクセスできました。

// 存储对象字面量；在后台使用JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// 获取存储的对象；在后台使用JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// 获取所有存储的值
console.log(store.getAll());

// 循环遍历所有存储的值
store.forEach(function(key, val) {
  console.log(key, val);
});

secstore.js

// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);

// 获取并显示问候语
console.log(lscache.get('greeting'));

// 删除问候语
lscache.remove('greeting');

// 刷新整个缓存项目
lscache.flush();

// 只刷新过期的项目
lscache.flushExpired();

Secstore.jsは、Stanford JavaScript Crypto Libraryにオプションのセキュリティレイヤーを追加するデータストレージAPIです。 secstore.jsを使用すると、Storage Method（localstorage、sessionstorage、またはcookie）を選択できます。 secstore.jsを使用するには、前述のsjcl.jsライブラリも含める必要があります。

以下は、「true」に設定された暗号化オプションを使用してデータを保存する方法を示す例です。 使用されたセット（）メソッドに注意してください。これは、指定したオプション（カスタムデータを含む）と結果をテストできるコールバック関数に渡します。次に、get（）メソッドを使用してデータを取得できます。

localforage

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

// 从对象中检索数据
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);

Mozillaによって構築されたこのライブラリは、シンプルなLocalStorageのようなAPIを提供しますが、IndexEdDBまたはWebQLを介して非同期ストレージを使用します。 APIはlocalStorage（getItem（）、setItem（）など）とまったく同じですが、APIは非同期であり、構文にはコールバックの使用が必要です。

たとえば、

>値を設定するか取得するかに関係なく、返品値は取得されませんが、コールバック関数に渡されたデータを処理し、（オプション）エラーを処理できます。

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

localforageに関する他のいくつかのポイント：

サポートJavaScript Promise
他のライブラリと同様に、文字列を保存するだけでなく、オブジェクトを設定して取得することにも限定されます
config（）メソッドを使用してデータベース情報を設定できます

basil.js

basil.jsは、ユニークで非常に使いやすい機能を含む統一されたLocalStorage、SessionStorage、およびCookie APIとして説明されています。基本的な方法は、次のように使用できます

basil.jsを使用して、LocalStorageが利用可能かどうかをテストすることもできます。

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

basil.jsでは、CookieまたはsessionStorageを使用することもできます。

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

最後に、オプションオブジェクトでは、オプションオブジェクトを使用して以下を定義できます。

データのさまざまな部分の名前空間

// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

// 获取'website'
store.get('website');

// 删除'website'
store.remove('website');

// 清除所有键
store.clear();

使用するストレージメソッドの優先順序

デフォルトストレージメソッド

• Cookieの有効期限
lz-string

lz-stringユーティリティを使用すると、圧縮を使用してLocalStorageに大量のデータを保存できます。非常に使いやすいです。ページにライブラリを含めた後、次のことを行うことができます。

// 存储对象字面量；在后台使用JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// 获取存储的对象；在后台使用JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// 获取所有存储的值
console.log(store.getAll());

// 循环遍历所有存储的值
store.forEach(function(key, val) {
  console.log(key, val);
});

compress（）およびdecompress（）メソッドの使用に注意してください。上記のコードのコメントは、圧縮の前後の長さの値を示しています。クライアントストレージは常にスペースが限られているため、これがどれほど有益であるかを見ることができます。 ライブラリのドキュメントで説明されているように、データをUINT8ARRAY（JavaScriptの新しいデータ型）に圧縮し、データを圧縮してクライアントに外部に保存することもできます。

名誉ある言及

// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);

// 获取并显示问候语
console.log(lscache.get('greeting'));

// 删除问候语
lscache.remove('greeting');

// 刷新整个缓存项目
lscache.flush();

// 只刷新过期的项目
lscache.flushExpired();

上記のツールは、LocalStorageでやりたいほとんどすべてを行うのに役立つ場合がありますが、もっと探している場合は、チェックアウトしたい可能性のあるより関連するツールとライブラリをいくつか紹介します。

lokijs - node.js、ブラウザー、およびコルドバ用の高速でメモリ内のドキュメント指向のデータストア。

AngularJSクライアントストレージ - Angular JS Namespaceクライアントストレージ。 LocalStorageに手紙を書き、Cookieに戻ります。 Angular Core以外の外部依存関係はありません。

alasql.js - javascript sqlデータベースとnode.js for browsers。従来の関連テーブルとネストされたJSONデータ（NOSQL）を処理します。 LocalStorage、IndexEdDB、またはExcelからデータをエクスポート、保存、インポートします。

Angular-Locker - 角度プロジェクトでのローカル/セッションストレージのシンプルで構成可能な抽象化により、強力で使いやすいAPIが提供されます。

• jScache - JavaScriptファイル、CSSスタイルシート、およびLocalStorageを使用した画像のキャッシュを有効にします。
• largelocalStorage - さまざまなブラウザの欠陥を克服し、クライアント側に大きなキー価値ストレージを提供します。
• 他のライブラリを知っていますか？

• LocalStorage APIまたは関連ツールの上にクライアントストレージを強化するためのツールを作成した場合は、コメントでお気軽にお知らせください。

  （記事の残りの部分はFAQであり、元のテキストに従って書き直され、合理化されており、元の意図は維持されています）

  javaScriptローカルリポジトリ（FAQ）

  に関するよくある質問

  Q：JavaScriptローカルリポジトリを使用することの利点は何ですか？
  a：

  JavaScriptローカルリポジトリは多くの利点を提供します。クライアント側にデータを保存するためのより効率的な方法を提供し、Webアプリケーションのパフォーマンスを大幅に改善できます。また、これらのライブラリは、データ暗号化を許可するため、従来のデータストレージ方法よりも高いレベルのセキュリティを提供します。さらに、データ管理のためのよりユーザーフレンドリーなインターフェイスを提供し、開発者がローカルストレージを簡単に使用できるようにします。

  Q：Local StorageはJavaScriptでどのように機能しますか？
  a：

  JavaScriptのローカルストレージにより、WebアプリケーションはWebブラウザーにデータを保存することができます。 Cookieとは異なり、ローカルストレージは期限が切れず、サーバーに送り返されず、データストレージのより効率的な方法になります。ローカルストレージに保存されているデータは、ブラウザセッション全体に保存されます。つまり、ブラウザが閉じて再開された場合でも、利用可能です。

  Q：機密データにローカルストレージを使用できますか？
  a：

  ローカルストレージは、クライアントにデータを保存するための便利な方法を提供しますが、機密データを保存するために使用することはお勧めしません。これは、ローカルストレージが安全なストレージメカニズムとして設計されていないためです。ローカルストレージに保存されているデータは、簡単なJavaScriptコードを使用して簡単にアクセスして操作できます。したがって、パスワード、クレジットカード番号、個人情報などの機密データをローカルストレージに保存しないでください。

  Q：ローカルストレージでデータを管理する方法は？
  a：

  ローカルストレージでデータの管理には、アイテムのセットアップ、アイテムの取得、アイテムの削除という3つの主要なアクションが含まれます。プロジェクトを設定するには、キーと値の2つのパラメーターを受け入れるSetItem（）メソッドを使用できます。アイテムを取得するには、getItem（）メソッドを使用して、キーを引数として受け入れ、対応する値を返すことができます。アイテムを削除するには、引数としてキーを受け入れるRemoveItem（）メソッドを使用できます。

  Q：人気のあるローカルJavaScriptリポジトリは何ですか？
  a：

  store.js、localforage、js-cookieなど、JavaScriptに人気のあるローカルリポジトリがいくつかあります。 Store.jsは、ローカルストレージにシンプルで一貫したAPIを提供し、すべての主要なブラウザーで実行します。 LocalForageは、強力な非同期ストレージAPIを提供し、IndexEdDB、WebQL、およびLocalStorageをサポートします。 JS-Cookieは、ローカルストレージが利用できない場合にフォールバックとして使用できるCookieを処理するための軽量ライブラリです。

  Q：ローカルストレージが利用可能かどうかを確認するにはどうすればよいですか？

  a：JavaScriptの単純なTry/Catchブロックを使用して、ローカルストレージが利用可能かどうかを確認できます。 window.localStorageプロパティを使用して、ローカルストレージオブジェクトにアクセスできます。このプロパティが存在する場合はローカルストレージを利用でき、アイテムのセットアップと取得に使用できます。

  Q：ローカルストレージのストレージ制限はいくらですか？

  a：ローカルストレージのストレージ制限は、ブラウザごとに異なりますが、通常は約5MBです。これは、Cookieのストレージ制限（4kbのみ）よりもはるかに大きいです。ただし、多くのデータがWebアプリケーションを遅くする可能性があるため、ローカルストレージに保存するデータの量に注意することをお勧めします。

  Q：ローカルストレージは異なるブラウザ間で共有できますか？

  a：いいえ、ローカルストレージは異なるブラウザ間で共有できません。各Webブラウザには独自の独立したローカルストレージがあるため、あるブラウザに保存されているデータは別のブラウザーでは利用できません。これは、ローカルストレージに依存するWebアプリケーションを設計するときに重要です。

  Q：ローカルストレージのすべてのデータをクリアする方法は？

  a：clear（）メソッドを使用して、ローカルストレージ内のすべてのデータをクリアできます。この方法はパラメーターを受け入れず、ローカルストレージからすべてのアイテムを削除します。ローカルストレージ内のすべてのデータを永久に削除するため、この方法を使用する場合は注意してください。

  Q：モバイルデバイスでローカルストレージを使用できますか？

  a：はい、モバイルデバイスでローカルストレージを使用できます。ほとんどの最新のモバイルWebブラウザーはローカルストレージをサポートするため、デスクトップおよびモバイルデバイスで使用してデータを保存できます。ただし、モバイルデバイスのストレージ制限は低い場合があるため、Webアプリケーションを設計する際にはこれを考慮することが重要です。

以上が9ローカルストレージを操作するためのJavaScriptライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。