PHPからlocalStorageに書き込み・読み込み（PHP Advent JP 2011）

「PHP Advent Calendar jp 2011」6日目（12月6日）のエントリーです。

初めてアドベントカレンダーに参加したのですが、いきなり内容が被ってしまいました。そのまま公開しようと思ってたのですが、急遽ネタを思いついたので、早速作ってみました。

ちなみに最初のネタは_ww（アンダースコア･ワラワラ）というクラスです。

◆PHPからローカルストレージを使う

HTML5とスマートフォンが登場してから、クライアント（ブラウザー側）の技術が急速に進化していると感じます。今までのPHPでサーバー側でHTMLを構築するとは違ったウェブの構築になるのではないでしょうか。

という前振りで、HTML5で登場したlocalStorageをPHPからを操作するクラスを作ってみました。

ソースコードはgithubのphpadventjp2011で公開してあります。
localStorageクラスとサンプルが入っています。

一応、妙なスクリプトを入れられても大丈夫なはずですが･･･
セキュリティに関しては自己責任でお願いします。

◆基本的な使い方

基本的な考え方は

1. PHPの変数をlocalStorageに保存するJavaScriptを自動生成。これをHTMLのどこかに貼り付けると、ブラウザーにデータを保存。
2. ブラウザーのlocalStorageから値を読み出て隠しタグに変換するJavaScriptを自動生成。これをHTMLのフォーム内に貼り付けて、サブミットしてもらう。
3. フォームデータを受け取るときに隠しタグから値を取得。

です。

◆ローカルストレージに保存してみる

PHPコードです。

require_once './localStorage.php';
$data = array( 'test'=>'test', 'more'=>'more' );
$js = localStorage::saveStorage( $data, 'testID' );
$js2 = localStorage::saveStorage( 'just value', 'valID' );

この$jsや$js2をHTML内で出力すると、$dataの中身をブラウザーに保存します。

ちなみに生成されたJavaScriptです。
PHP変数をJSONに変換して、localStorageに保存しています。

<script>localStorage.setItem( 
'saveID_testID', '{"test":"test","more":"more"}' );
</script>

この後、クライアント側で保存した値を使えるようになります。

◆PHPで受け取ってみる

面倒ですが、まずはフォームが必要です。そこで次のPHPコードを走らせてJavaScriptを生成します。

require_once './localStorage.php'; 
$js = localStorage::loadStorage( 'testID' );
$js2 = localStorage::loadStorage( 'valID' );

保存する際につけた名前（「testID」や「valID」）を指定します。

生成されたJavaScriptです。
これをフォームのどこかに出力しておきます。

<input type="hidden" name="saveID_testID" id="saveID_testID">
<input type="hidden" name="saveID_testID_EncType_" value="json">
<script>
 document.getElementById( 'saveID_testID' ).value =
 localStorage.getItem( 'saveID_testID' );
</script>

<input type="hidden" name="saveID_valID" id="saveID_valID">
<input type="hidden" name="saveID_valID_EncType_" value="json">
<script>
document.getElementById( 'saveID_valID' ).value =
localStorage.getItem( 'saveID_valID' );
</script>

◆PHPで受け取ってみる（パート２）

こんなPHPコードで受け取れます。

require_once './localStorage.php'; 
$data = localStorage::loadPost( 'testID' ); 
$val = localStorage::loadPost( 'valID' );

保存する際につけた名前（「testID」や「valID」）を指定してください。

保存したままの値が入ってくる（はず）です。

◆使い方を考えてみる

勢いで作ったクラスですが、どう使うか考えてみました。
意外と使いどころがないｗ

フォームに一旦出力するので使い勝手が悪い気がします。サーバーだけで使うデータならセッション使ったほうが楽でしょう。ただクライアント側のJavaScriptと変数を共有したい場合に便利かもと思ってます。