ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5の新しいAPIとして知られるlocalStrageですが、基本的に同一ドメインでのみ、5MBまでとなっています。しかしサブドメインを使っている場合など、ドメイン間でデータをシェアしたいという場合もあるのではないでしょうか。

そこで使ってみたいのがCrossStorageです。ドメインを越えたlocalStrageのシェアを実現するソフトウェアです。

CrossStorageの使い方

CrossStorageではハブとクライアントという二つのサーバから成り立ちます。まずハブ側では許容するドメインとメソッドを定義します。

CrossStorageHub.init([
  {origin: /\.example.com$/,        allow: ['get']},
  {origin: /:(www\.)?example.com$/, allow: ['get', 'set', 'del']}
]);

次にクライアントはハブに接続します。

var storage = new CrossStorageClient('https://store.example.com/hub.html');
storage.onConnect().then(function() {
  // Set a key with a TTL of 90 seconds
  return storage.set('newKey', 'foobar', 90000);
}).then(function() {
  return storage.get('existingKey', 'newKey');
}).then(function(res) {
  console.log(res.length); // 2
}).catch(function(err) {
  // Handle error
});

これで他のサーバからもlocalStrageにアクセスできる仕組みです。

CrossStorageではハブになる側がCORS、CSPヘッダーを出力してクロスドメインを許可しています。それによってAjaxで送られてきたデータをハブ側のlocalStrageに保存する仕組みになっています。シンプルですが面白い仕組みですね。

仕組み上、自分のlocalStrageに保存しているのは変わらないので他のユーザとはシェアできませんのでご注意ください。

CrossStorageはnode/JavaScript製のオープンソース・ソフトウェア(Apache License 2.0)です。

zendesk/cross-storage

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2