以前の記事「HTML5ローカルストレージ：Webストレージ」では、LocalStorageを使用してローカルストレージを実装する方法を簡単に紹介します。実際、SessionStorageおよびLocalStorageに加えて、HTML5はローカルデータベースを介したローカルデータストレージもサポートしています。 HTML5は、主に埋め込みデバイスに集中しているSQLLITEなどのファイルタイプのデータベースを使用しています。 iOS/Android開発に精通している学生は、SQLLITEデータベースに精通している必要があります。
HTML5でのデータベース操作は比較的簡単で、2つの主な機能があります。
1. OpenDataBaseメソッドを介してデータベースにアクセスするオブジェクトを作成しますvar db = opendatabase（databaseName、バージョン、説明、サイズ）
この方法には4つのパラメーターがあり、その関数は次のとおりです。
データベースネーム：データベース名。
バージョン：データベースバージョン番号、塗りつぶしなし。
説明：データベースの説明。
サイズ：データベースに割り当てられたスペースのサイズ。
2。最初のステップで作成されたデータベースアクセスオブジェクト（DBなど）を使用してトランザクションメソッドを実行してトランザクション処理を実行しますdb.transaction（function（tx））{
//ステートメントを実行してデータベースにアクセスします
}）;
トランザクションメソッドは、コールバック関数をパラメーターとして使用し、データベースにアクセスする特定の操作が実行されます。
3。executesQLメソッドを介してクエリを実行しますtx.executesql（sqlquery、[value1、value2 ..]、datahandler、errorhandler）
executesQLメソッドには4つのパラメーターがあり、その関数は次のとおりです。
SQLQuery：具体的に実行する必要があるSQLステートメントは、作成、選択、更新、削除を作成できます。
[value1、value2 ..]：SQLステートメントで使用されるすべてのパラメーターの配列。 executesQLメソッドでは、SQLステートメントで使用されるパラメーターが置き換えられますか？まず、これらのパラメーターは順番に配列で構成され、2番目のパラメーターに配置されます。
DataHandler：クエリ結果セットを取得できるコールバック関数が正常に呼び出されます。
エラーハンドラー：実行が失敗したときに呼び出されるコールバック関数。
この記事では、HTML5データベースサポートを使用して、前の記事でアドレス帳管理を再実装します。実装される機能は次のとおりです。
連絡先を作成してデータベースに保存できます。連絡先フィールドには、次のものが含まれます。名前、携帯電話番号、会社、作成時間。
現在保存されているすべての連絡先情報をリストします。
特定の連絡先情報を削除できます。
同様に、次のように、最初にHTMLページを準備します。<！doctype html>
<html>
<head>
<Meta charset = "utf-8"/>
<Title> HTML5ローカルストレージローカルデータベース</title>
<style>
.adddiv {
ボーダー：2pxダッシュ#ccc;
幅：400px;
テキストアライグ：センター;
}
</style>
</head>
<body onload = "loadall（）">
<div>
<label for = "user_name"> name：</label>
<入力型= "text" id = "user_name" name = "user_name"/>
<br/>
<label for = "mobilephone">携帯電話：</label>
<input type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<label for = "mobilephone"> company：</label>
<input type = "text" id = "company" name = "company"/>
<br/>
<入力型= "ボタン" onclick = "save（）" value = "add record"/>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
インターフェイスは次のように表示されます。
新しい連絡先を作成してデータベースに保存する機能を実装するには、次の簡単な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）{
アラート（ "Operation sucturing"）;
loadall（）;
}
// SQLステートメントが実行された後に実行されるコールバック関数が失敗しました
function onerror（TX、error）{
alert（ "操作が失敗し、メッセージが失敗したメッセージ："+ error.message）;
}
現在保存されているすべての連絡先リストを表示するには、次のJSコードを使用できます。
// sqlliteデータベースに保存されているすべての連絡先を取得します
関数loadall（）{
var list = document.getElementById（ "list"）;
db.Transaction（function（tx）{
//データテーブルが存在しない場合は、データテーブルを作成します
tx.executesQl（ '存在しない場合は'テーブルの作成連絡先（名前テキスト、電話テキスト、会社テキスト、CreateTime Integer） '、[]）;
//すべての連絡先レコードを確認します
tx.executesql（ 'select * from contact'、[]、function（tx、rs）{
if（rs.rows.length> 0）{
var result = "<table>";
結果 += "<tr> <th>シリアル番号</th> <th> name </th> <th> mobile </th> <th> company </th> <th> add </th> <th>操作</th> </tr>";
for（var i = 0; i <rs.Rows.length; i ++）{
var row = rs.rows.item（i）;
//時間とフォーマットの出力を変換します
var time = new Date（）;
time.settime（row.createtime）;
var timestr = time.format（ "yyyy-mm-dd hh：mm：ss"）;
//テーブルの行ノードを組み立てます
result+= "<tr> <td>"+（i+1）+"</td> <td>"+row.name+"</td> <td>"+row.phone+"</td> <td>"+row.company+"</td> <td>"+timestr+"</td> <td> <入力タイプ= 'Valute' ded 'dele onclick = 'del（ "+row.phone+"）'/> </td> </tr> ";
}
list.innerhtml = result;
}それ以外{
list.innerhtml = "データは現在空です。急いで連絡先の追加を開始します」。
}
}）;
}）;
}
その中で、フォーマット時間を含む形式関数は、次のJS実装と呼ぶことができます。date.prototype.format = function（format）
{
var o = {
「M+」：this.getMonth（）+1、//月
「D+」：this.getDate（）、// day
「H+」：this.gethours（）、// hour
「M+」：this.getMinutes（）、// minuts
「S+」：this.getSeconds（）、// second
「Q+」：math.floor（（this.getmonth（）+3）/3）、//四半期
「S」：this.getMilliseConds（）// millisecond
}
if（/（y+）/。test（format））format = format.replace（regexp。$ 1、
（this.getTullyear（）+""）。substr（4 -regexp。$ 1.Length））;
for（o in o）if（new regexp（ "（" + k + "）"）。テスト（フォーマット）））
format = format.replace（regexp。$ 1、
regexp。$ 1.LENGTH == 1？わかりました] ：
（ "00"+ o [k]）。substr（（ ""+ o [k]）。長さ））;
返品形式。
}
最後に、インターフェイスの実装効果は次のとおりです。
特定の連絡先を実装するには、次のJSコードを実行する必要があります。//連絡先情報を削除します
function del（電話）{
db.Transaction（function（tx）{
//電話で渡されたパラメーターをここに表示する必要があることに注意してください。
tx.executesql（ 'where Where Where Where Where Where where where where where where where where delete、[String（Phone）]、Onsuccess、Onerror）;
}）;
}
上記のスクリーンショットのテーブルスタイルのように、次のCSSコードを参照できます。th {
フォント：BOLD 11PX「Trebuchet MS」、Verdana、Arial、Helvetica、Sans-Serif;
色：＃4F6B72;
境界線右：1pxソリッド＃C1DAD7;
境界線：1PX SOLID＃C1DAD7;
ボーダートップ：1PXソリッド＃C1DAD7;
レター間隔：2px;
テキスト変換：大文字;
テキストアライグ：左;
パディング：6px 6px 6px 12px;
}
TD {
境界線右：1PX SOLID＃C9DAD7;
境界線：1PX SOLID＃C9DAD7;
背景：#ffff;
パディング：6px 6px 6px 12px;
色：＃4F6B72;
}