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

前回の記事「HTML5 ローカル ストレージの Web ストレージ」では、localStorage を使用してローカル ストレージを実現する方法を簡単に紹介しました。実際、HTML5 は sessionStorage と localStorage に加えて、ローカル データベースを介したローカル データ ストレージもサポートしています。 , HTML5 では「SQLLite」などのファイルタイプのデータベースが使用されており、主に組み込みデバイスに特化しているため、IOS/Android 開発に慣れている学生は SQLLite データベースに精通しているはずです。
HTML5 でのデータベース操作は比較的単純で、主に次の 2 つの関数が含まれます。
1. openDatabase メソッドを通じてデータベースにアクセスするオブジェクトを作成します

コードをコピーします

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

var db = openDatabase(databasename,version,description,size)

このメソッドには 4 つのパラメータがあり、その機能は次のとおりです:
databasename: データベース名;
version: データベースのバージョン番号 (オプション);
size: スペースデータベースに割り当てられたサイズ

2. 最初の手順で作成したデータベース アクセス オブジェクト (db など) を使用してトランザクション メソッドを実行し、トランザクション処理を実行します。
コードをコピーします

コードは次のとおりです: db.transaction(function(tx)){ //データベースにアクセスするステートメントを実行します

} ; >

コードをコピーします

コードは次のとおりです:
tx.executeSql(sqlQuery,[value1,value2. .], dataHandler, errorHandler)

executeSql メソッドには 4 つのパラメーターがあり、その機能は次のとおりです。

sqlQuery:具体的に実行する必要がある SQL ステートメント (create、select、update、delete など)。[value1,value2..]: SQL ステートメントで使用されるすべてのパラメーターの配列。最初に、executeSql メソッドで置き換えます。 SQL ステートメントで使用するパラメーターを「?」で指定し、これらのパラメーターを配列に順番に入力します。dataHandler: 実行が成功したときに呼び出されるコールバック関数。セットを取得できます; errorHandler: 実行失敗時に呼び出されるコールバック関数; この記事は HTML5 のデータベースに対応しており、以前の記事のアドレス帳管理を再実装します。

連絡先を作成してデータベースに保存できます。連絡先フィールドには、名前、携帯電話番号、会社、作成時刻が含まれます。

列は現在保存されている連絡先情報をすべて削除できます。 ;

同様に、次のように最初に HTML ページを準備します
:

コードをコピーします


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


;

.addDiv{

border: 2px 破線 width:400px; >text-align:center; }

名前:

携帯電話:

関数には次の単純な JS コードが必要です:





コードをコピーします


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

//データベースを開きます
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 コード実装を使用します:

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

//すべてを sqlLite データベースに保存します

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;
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。