HTML5 使用浏览器内置数据库之 Web SQL

来源：互联网发布：阿里云服务器伪静态编辑：程序博客网时间：2024/06/05 03:48

要点：

1. openDatabase(数据库名,版本号,简介,存储空间大小,回调函数);

var db = openDatabase('demoDB','1.0','this is a demo',2*1024*1024,function(){console.log('create demoDB success')});

2. 事务处理。db.transaction(function(ts){});

db.transaction(function (ts) {ts.executeSql(sql,[],function (su){console.log('create table success');},function (er){console.log('create table error');})});

3. 执行SQL语句。ts.executeSql(sql,[],function(success){},function(error){});

ts.executeSql(sql,[],function (su){console.log('create table success');},function (er){console.log('create table error');})

另W3C已停止对WebSQL的更新。

全部的源码

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script> //创建、连接数据库demoDBfunction conDB(){var db = openDatabase('demoDB','1.0','this is a demo',2*1024*1024,function(){console.log('create demoDB success')});return db;//alert('con');}//创建数据表table,包括mid,title,content字段function iniTable(){var db = conDB();var sql = "create table if not exists dm_message (mid unique,title text, content text)";db.transaction(function (ts) {ts.executeSql(sql,[],function (su){console.log('create table success');},function (er){console.log('create table error');})});}iniTable();//增加数据function insertData(){var db = conDB();var tval = document.getElementById('tval').value;var cval = document.getElementById('cval').value;var sql = "insert into dm_message (title,content) values (?,?)";db.transaction(function(ts) {ts.executeSql(sql,[tval,cval],function(su) {alert('insert success');},function(er) {alert('insert error');})});}//显示数据function getData(){var db = conDB();var sql = "select * from dm_message";db.transaction(function(ts){ts.executeSql(sql,[],function(su,rs){if (rs) {for (var i=0; i<rs.rows.length; i++) {var str="<tr><td>"+(i+1)+"</td><td>"+rs.rows.item(i).title+"</td><td>"+rs.rows.item(i).content+"</td></tr>";//alert(str);console.log(str);document.getElementById('rsData').innerHTML += str;}}},function(er){alert('getData errors')})});}getData();//清空数据function clearTable(){var db = conDB();var sql = "delete from dm_message";db.transaction(function (ts){ts.executeSql(sql,[],function (su){alert('clear success');},function (er){alert('clear error');})});}</script></head><body><form>title:<input type="text" name="title" id="tval" /><br />contnet:<textarea name="content" id="cval"></textarea><br /><input type="button" value="Submit" onclick="insertData()" /></form><button onclick="clearTable()">clear table</button><hr /><div id="result"><table style="border: 1px solid grey;"><tr><td>id</td><td>title</td><td>content</td></tr></table><table style="border: 1px solid grey;" id="rsData"></table></div></body></html>

0 0