您的位置：首页 > 数据库

HTML5のWeb SQL

2016-02-13 11:32 519 查看

HTML5のWeb SQL

Web SQL简述

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

以下是规范中定义的三个核心方法：

方法概述
openDatabase使用现在数据库或者新建数据库对象
transaction控制事务
executeSql执行CRUD操作

操作详解

以下是三个核心方法详解：

openDatabase(dbName, version, description, size, callback)
dbName：数据库名称

version：版本号

description：描述信息

size：大小

callback：回调函数

transaction(callback(tx))
callback：回调函数

executeSql(sql, [parameters, callback(tx, results), null])
sql：SQL语句字符串

parameters：参数数组

callback：回调函数

实例回放

通过按钮控制SQL执行，示例demo如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<noscript>Your browser does not support JavaScript pluin</noscript>
<script type="text/javascript">
var db = openDatabase('webstorage', '1.0', 'The web storage', 2 * 1024);
var message = "";

function createTable() {
var createSql = 'CREATE TABLE IF NOT EXISTS LOGS(id unique, log)';
db.transaction(function(tx) {
tx.executeSql(createSql);
message = "Create database/table successfully.";
document.querySelector("#detail").innerHTML = message;
});
}

function insertData() {
var insertsql = 'INSERT INTO LOGS(id, log) VALUES(?, ?)';
var id = 1;
var log = "imooc";
db.transaction(function(tx) {
tx.executeSql(insertsql, [id, log]);
tx.executeSql(insertsql, [id + 1, log]);
message = "Insert data successfully.";
document.querySelector("#detail").innerHTML = message;
});
}

function deleteData() {
var deleteSql = 'DELETE FROM LOGS WHERE id = ?';
var id = 1;
db.transaction(function(tx) {
tx.executeSql(deleteSql, [id]);
message = "Delete data successfully.";
document.querySelector("#detail").innerHTML = message;
});
}

function updateData() {
var updateSql = 'UPDATE LOGS SET log = "hacker" WHERE id = ?';
var id = 1;
db.transaction(function(tx) {
tx.executeSql(updateSql, [id]);
message = "Update data successfully.";
document.querySelector("#detail").innerHTML = message;
});
}

function selectData() {
var selectSql = 'SELECT id, log FROM LOGS WHERE id > ?';
var id = 1;
db.transaction(function(tx) {
tx.executeSql(selectSql, [id], function(tx, results) {
var length = results.rows.length;
message = "Select rows is " + length + ".<br>";
document.querySelector("#detail").innerHTML += message;

for (var i = 0; i < length; i++) {
message = results.rows.item(i).id + ", " + results.rows.item(i).log + "<br>";
document.querySelector("#detail").innerHTML += message;
}
}, null);
});
}
</script>
<style type="text/css">
#status {
width: 600px;
height: 200px;
border:#CCDD66 1px solid;
margin:0 auto;
}

#btns {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="status">
<h3>status</h3>
<span id="detail"></span>
</div>
<div id="btns">
<button type="button" onclick="createTable()">create Table</button> 
<button type="button" onclick="insertData()">insert Data</button> 
<button type="button" onclick="deleteData()">delete Data</button> 
<button type="button" onclick="updateData()">update Data</button> 
<button type="button" onclick="selectData()">select Data</button>
</div>
</body>
</html>


联系我

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航