ホームページ > 記事 > ウェブフロントエンド > HTML5 Web ストレージ - Web SQL サンプル コード分析
HTML5 Web ストレージ - Web SQL サンプル コード分析
- 黄舟オリジナル
- 2017-03-16 16:16:101499ブラウズ
Web SQLとは何ですか?
私たちはアプリケーションで大量の構造化データを扱うことがよくありますが、HTML5はWeb SQLデータベースの概念を導入しました。これにより、アプリケーションは非同期Javascriptインターフェースを介してSQLliteデータベースにアクセスできるようになります。 。ただし、現在 Web SQL は HTML5 仕様には含まれていませんが、Safari、Chrome、および Oprea ブラウザーは別の仕様で Web SQL をサポートしています。
3 つのコア メソッド
Web SQL Database 仕様で定義されている 3 つのコア メソッド:
openDatabase: このメソッドは、既存のデータベースまたは新しいデータベースを使用して、データベースを作成オブジェクト
-
transaction: このメソッドを使用すると、状況に応じてトランザクションのコミットまたはロールバックを制御できます
executeSql: このメソッドは SQL の実行に使用されます query
openDatabase
Syntax: var db = openDatabase(名前、バージョン、表示名前、推定サイズ、作成すべて戻る);
名前: データベース名
version: データベースのバージョン番号
displayName: データベースの説明
estimatedSize: データベースに保存されたデータのサイズ (バイト単位)
CreationCallback:
コールバック関数、オプションの
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
}); この例では、テーブル testTable を作成し、そのテーブルに 3 つのデータを挿入します。4 つの実行ステートメントのいずれかでエラーが発生した場合、トランザクション全体がロールバックされます。 executeSqlexecuteSql メソッドは、SQL ステートメントを実行して結果を返すために使用されます。このメソッドには 4 つのパラメーターがあります。
- クエリ 文字列
- クエリ文字列内の疑問符を置換するために使用されるパラメータ
- 実行成功コールバック関数 (オプション)
- 実行失敗コールバック関数 (オプション)
文法:
trans.executeSql(sql,[],function(){trans,data},function(trans,msg){});
例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web SQL demo</title>
<script src="jquery-3.0.0.min.js"></script>
<script>
//创建或连接数据库
function getDb()
{
var db = openDatabase("data.db","1.0","demo",1024*1024);
return db;
}
//初始化数据库
function initDb()
{
var db = getDb();
if(db == null)
{
alert("你的浏览器不支持web SQL");
return null;
}
db.transaction(function(trans){
trans.executeSql("create table if not exists demo(name text null,title text null,content text null)",[],function(trans,result){},
function(trans,error){alert(error)})
});
}
$(function(){
var db = getDb();
initDb();
$("#btnSave").click(function(){
var name = $("#name").val();
var title = $("#title").val();
var content = $("#content").val();
//执行sql脚本来插入数据
db.transaction(function(trans){
trans.executeSql("insert into demo(name,title,content)values(?,?,?)",
[name,title,content],
function(trans,success){},
function(trans,error){alert(error);}
);
showAll();
});
});
})
//显示所有数据
function showAll()
{
$("#tblData").empty();
var db = getDb();
db.transaction(function(trans){
trans.executeSql("select * from demo",[],function(trans,data){
//获取查询到的数据
if(data)
{
for(var i=0;i<data.rows.length;i++)
{
//获取一行json数据，将数据拼接成表格
appendDataToTable(data.rows.item(i));
}
}
},function(trans,error){alert(error);});
});
}
function appendDataToTable(data)
{
var name = data.name;
var title = data.title;
var content = data.content;
var strHtml = "";
strHtml += "<tr>";
strHtml += "<td>"+name+"</td>";
strHtml += "<td>"+title+"</td>";
strHtml += "<td>"+content+"</td>";
strHtml += "</tr>";
$("#tblData").append(strHtml);
}
</script>
</head>
<body>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="name" id="name" required/></td>
</tr>
<tr>
<td>标题</td>
<td><input type="text" name="title" id="title" required/></td>
</tr>
<tr>
<td>留言</td>
<td><input type="text" name="content" id="content" required/></td>
</tr>
</table>
<input type="button" value="保存" id="btnSave"/>
<br/>
<input type="button" value="展示所有数据" onclick="showAll();"/>
<table id="tblData"></table>
</body>
</html>実行結果は次のとおりです:
以上がHTML5 Web ストレージ - Web SQL サンプル コード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。