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)」のように書きます。
キーとデータの組で保存できますので、簡単なデータベースとしても利用できると思います。
発展的な使い方としては、はてなダイアリーの日記記入フォームのように、入力中のテキストを定期的に保存するようにすれば、
万が一、長いテキストの入力中にブラウザが落ちたり、ページが切り替わってしまった場合にも、以前の状態に戻すことができるでしょう。
また、ユーザーの設定によって、数メガのデータを保存することができます。
郵便番号データベースや、ゲームのセーブデータなど、一時的なデータの保存に活躍できると思います。
ぜひ、使ってみてください。