【ITニュース解説】What's the Difference Between localStorage and NonLocalStorage? A Developer's Guide

Web開発において、ブラウザにデータを保存する手段としてlocalStorageは広く利用されている。しかし、現代のWebアプリケーションのニーズはより複雑化しており、複数デバイスやタブ間でのデータ共有、リアルタイムなデータ同期などが求められる。そこで登場するのが、NonLocalStorageという新しい技術だ。

localStorageは、ブラウザにデータを永続化するためのシンプルなAPIを提供する。setItemでデータを保存し、getItemでデータを取得する。設定や通知の表示/非表示など、デバイス固有の設定を保存するのに適している。ただし、localStorageのデータは、同一オリジンポリシーによって制限され、別のドメインやサブドメインからはアクセスできない。また、データは静的であり、他のタブやデバイスでデータが変更されても自動的に更新されない。

一方、NonLocalStorageは、localStorageのAPIを踏襲しつつ、より高度な機能を提供する。NonLocalStorageのデータは、クラウド上に保存され、オブジェクトIDを共有することで、異なるデバイスやドメインからアクセスできる。データはリアルタイムに同期されるため、あるデバイスでデータが変更されると、他のデバイスにも即座に反映される。

NonLocalStorageのAPIは、localStorageとほぼ同じであるため、簡単に移行できる。さらに、SyncObjectというより高度な抽象化も提供されており、JavaScriptのProxyを使って、リモートの状態をローカルオブジェクトのように扱うことができる。これにより、setItemやgetItemといったメソッドを呼び出す手間が省け、ReactやVueなどのフレームワークとの統合が容易になる。

NonLocalStorageは、単なるキーバリューストアではなく、リアルタイムアプリケーションのための包括的なツールキットを提供する。例えば、Presence機能を使えば、誰がオンラインであるかをリアルタイムに把握できる。Atomic Operations機能を使えば、複数のユーザーが同時にアクセスしても安全なカウンターを実装できる。オフラインファーストのサポートも提供されており、ネットワーク接続が途絶えた場合でも、ローカルにデータを保存し、再接続時に自動的に同期する。セキュリティ機能も充実しており、エンドツーエンド暗号化（E2EE）をオプションで利用できる。

React開発者向けには、@vaultrice/reactと@vaultrice/react-componentsという2つのパッケージが提供されている。@vaultrice/reactは、カスタムフック（useNonLocalState、useNonLocalCounter、useMessagingなど）を提供し、データの取得、コンポーネントの状態管理、リアルタイムイベントのサブスクライブ/アンサブスクライブといった定型的な処理を自動化する。@vaultrice/react-componentsは、VotingなどのUIコンポーネントを提供し、複雑なリアルタイム機能を数行のJSXコードでアプリに追加できるようにする。

localStorageは、シンプルでデバイス固有のデータを保存するのに適している。一方、NonLocalStorageは、複数のドメインやデバイス間でデータを共有する必要がある場合、リアルタイムなデータ同期が必要な場合、ネットワークの中断に対する耐性が必要な場合、高度なセキュリティ機能が必要な場合に適している。NonLocalStorageは、フリーミアムモデルで提供されており、無償で利用を開始できる。