Technology::HTML5 サンプル・データベース機能でフォームの永続化サンプル

サンプルフォーム

Safari ver 4.0.4 で動作確認しています。

ほかのブラウザーは全滅の様子。

使い方：

テキストボックスに適当に値を入れて、「どこかウィンドウをクリックしてから」Safariを閉じます。もう一度Safariでこのページをみると…入力した値が残っている、はず。

データベースの扱いは、かなり適当ですので失礼。

フォームの永続化をしない場合は？

フォームに中身が残っているのがSafariの機能でないことを確認するため、「永続化処理をしていない場合」のサンプルを作ってあります。

JavaScriptはどうなっているのか？

ソースコードはソースを除いてみてください。

下に貼り付けました。Syntaxhighlighterが動かない･･･

問題点・改善点など

ありすぎですが・・・あくまでサンプルですので。

• jQueryのchangeメソードを利用してます。ので入力したあとに一度フォーカスをはずすとDBに記録されます。逆に入力中に突然ブラウザーが落ちた場合に対応できません。
• DBには追加のみしてます。なのでデータは増えるばかり。本当は「Replace」というSQLがあると便利なんですけどねぇ。いや、もしかしたらあるのか？
• テキスト要素には対応できますが、ラジオボタンやチェックボックスの場合は動かないと思います。IDがない場合なども動かないかも。
• 「フォームの永続化」は日本語としてあってるのかな？。
• 名前は「perma_form」とか？
  ネーミングはむつかしい。

ソースコード

 
// データベースのオープン
var db = openDatabase("wsjp_sample", "0.1", "Sample WorkSpot.JP", 1024*1024);

// テーブルの作成
db.transaction(function(tx) {
  tx.executeSql("create table if not exists perma_form( form, name, id, val )");
});

var form_name = "form_sample1";

// DBからフォームの中身を読み込み
function load() 
{
	db.transaction( function( tx ) 
	{
		tx.executeSql("select * from perma_form where form=?", [form_name], 
			function(tx, rs) {
				var rows = rs.rows;
				var n    = rows.length;
				for( var i = 0; i < n; i++) {
					var row = rows.item(i);
					// 何も考えずIDで変更をかける。IDがない場合は…考えていない。
					$( '#' + row.id ).val( row.val );
				}
			}
		);
	});
}

$( document ).ready( function() 
{
	load();
	// フォームが変更されたら、中身をDBに保存する。
	$( "input:visible" ).change( function() {
		var val = $(this).val();
		var name= $(this).attr( 'name' );
		var id  = $(this).attr( 'id' );
		// すでにデータがあればUpdateなのだが、ここはいい加減。
		// いきなりInsertしてしまってます。
		db.transaction( function( tx ) {
			tx.executeSql( "insert into perma_form (form, name, id, val) values (?, ?, ?, ?)", [form_name, name, id, val] );
		});
	});
	
});

// データを破棄。全部破棄してしまいます。
function cleaup() 
{
	db.transaction( function( tx ) 
	{
		//tx.executeSql("delete from perma_form where form=?", [form_name] );
		tx.executeSql("delete from perma_form" );
		alert("deleted all perma_form data...");
	});
}