HTML5 ローカル storage_html5 チュートリアル スキルのデータベース ストレージ アプリケーションの概要

//データベースを開きます
var db = openDatabase('contactdb','','ローカル データベース デモ',204800);
//データを保存します
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value; ;
//作成時刻
var time = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('連絡先の値に挿入(?, ? ,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
}
//SQL ステートメントが正常に実行された後に実行されるコールバック関数🎜>function onSuccess(tx,rs){
alert("Operation success");
loadAll();
}
//SQL ステートメントの実行に失敗した後に実行されるコールバック関数
function onError(tx ,error){
alert("操作が失敗しました、失敗メッセージ: " error.message);
}


現在保存されているすべての連絡先リストを表示するには、次のようにします。次の JS コード実装を使用します:

functionloadAll(){
var list = document.getElementById("list");
db.transaction(function(tx){
//if データ テーブルが存在しない場合は、データ テーブルを作成します。
tx.executeSql('存在しない場合はテーブルを作成 contact(name text,phone text,company text,createtime INTEGER)',[]);
//すべての連絡先をクエリします 個人レコード
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = "result = "シリアル番号名前携帯電話番号 会社時間を追加オペレーション";
for(var i=0;ivar row = rs.rows.item(i);
//時間を変換し、出力をフォーマットします
var time = new Date(); row.createtime );
var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
//テーブルの行ノードを組み立てます
result = " ;" (i 1) "" row.name "gt;" row.phone "" 行.company "" timeStr "< /td>";
}
list.innerHTML = result;
}else{
list.innerHTML = "データは現在空です。連絡先の追加を開始してくださいこのうち、フォーマット時間に関わるフォーマット関数は以下を参考に実装できます。次の JS
:





コードをコピー

コードは次のとおりです:
Date.prototype.format = function (format)
{

var o = {

"M " : this.getMonth() 1, //month "d " : this.getDate( ), //日 "h " : this.getHours(), // 時間 "m " : this.getMinutes(), //分 "s " : this.getSeconds(), //秒

"q " : Math.floor((this.getMonth() 3)/3), //四半期

"S" : this.getMilliseconds() //ミリ秒

}
if(/(y )/ .test(format)) format=format.replace(RegExp.$1,
(this.getFull Year() "").substr(4 - RegExp.$1.length);
for(var k in o )if(new RegExp("(" k ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length= =1 ? o[k] :
("00" o[k]).substr(("" o[k]).length));
戻り値の形式; 🎜>
最後に、インターフェイス実装の効果は次のとおりです:



特定の連絡先を実装するには、次の JS コードを実行する必要があります
:





コードをコピー

コードは次のとおりです:

//連絡先情報を削除function del (phone){ db.transaction(function(tx) {
//ここで示す必要があるのは、受信パラメータphone を文字列型に変換することであることに注意してください
tx.executeSql('delete from contact where Phone=?',[String(phone)],onSuccess,onError) ;

})

} 上のスクリーンショットのテーブル スタイルの場合、次の CSS コード

を参照してください:

コードをコピー


代码如下:

th {
フォント: 太字 11px "Trebuchet MS"、Verdana、Arial、Helvetica、サンセリフ;
色: #4f6b72;
ボーダー右: 1px ソリッド #C1DAD7;
border-bottom: 1px ソリッド #C1DAD7;
ボーダートップ: 1px ソリッド #C1DAD7;
文字間隔: 2px;
テキスト変換: 大文字;
テキスト整列: 左;
パディング: 6px 6px 6px 12px;
}
td {
border-right: 1px ソリッド #C9DAD7;
border-bottom: 1px ソリッド #C9DAD7;
背景: #fff;
パディング: 6px 6px 6px 12px;
色: #4f6b72;
}