unoh.github.com

ローカルPCへ大容量データを保存するJavaScriptライブラリ「save2local.js」

Thu Jan 25 07:18:09 -0800 2007

こんにちは。さかとくです。
JavaScriptでローカルPCにデータを保存するライブラリ「save2local.js」を作りましたので公開します。
通常、JavaScriptではセキュリティが考慮されているため、データをローカルPCに保存するには、Cookieを利用します。
しかし、Cookieを利用する場合は、それほどたくさんの情報を保存することができません。
そのため、ゲームのセーブデータや、フォームに記入したデータなどは、セッションの仕組みを利用してサーバーに保存するのが一般的でした。「save2local.js」ライブラリを使えば、サーバーを利用することなく、ローカルPCに任意のテキストを保存できます。

今回ローカルPCにデータを保存するために、Flashの機能を使います。Flashには、SharedObjectと言ってローカルPCにデータを保存する機能がついています。このライブラリでも、この機能を利用してローカルへのデータ保存を実現しています。

以前、ウノウラボでFlashとJavaScriptを組み合わせて、クリップボードへ保存するライブラリや、MP3を再生するライブラリを作りました。
今回も、これとほとんど同じ要領でFlashを利用するライブラリを作った訳ですが、 Flashと併用することで、JavaScriptの可能性を何倍にも広げることができると思います。


ライブラリのダウンロード

→「save2local.js」ライブラリをダウンロード

サンプル

→「save2local.jsのテストページ」

使い方

ライブラリの使い方は至って簡単です。

(1) ライブラリをダウンロードしたら、アーカイブ内の以下のファイルをHTMLと同じフォルダか参照できるところにコピーします。

-swfobject.js
-save2local.swf
-save2local.js

(2) 以下のコードをHTMLに貼り付けます。

--- ここから ---
<!-- save2local.setup.begin -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="save2local.js"></script>
<!-- save2local.setup.end -->
--- ここまで ---

(3) リンクをクリックしたらセーブ&ロードする場合には以下のように記述します。

--- ここから ---
<script type="text/javascript"><!--
function test() {
  save2local.saveData("key","value");
  alert( save2local.loadData("key") );
}
--></script>
<a href="javascript:test()">test</a>
--- ここまで ---

以上です。

保存する時には、「save2local.saveData(key, data)」と書きます。keyには任意の文字列を指定できます。
そして、読み込みたい時は「save2local.loadData(key)」のように書きます。

キーとデータの組で保存できますので、簡単なデータベースとしても利用できると思います。

発展的な使い方としては、はてなダイアリーの日記記入フォームのように、入力中のテキストを定期的に保存するようにすれば、
万が一、長いテキストの入力中にブラウザが落ちたり、ページが切り替わってしまった場合にも、以前の状態に戻すことができるでしょう。

また、ユーザーの設定によって、数メガのデータを保存することができます。
郵便番号データベースや、ゲームのセーブデータなど、一時的なデータの保存に活躍できると思います。

ぜひ、使ってみてください。