HTML5本地数据库留言本

<! DOCTYPE html >

< html lang = "en" >

< head >

< title > 本地数据库 </ title >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

</ head >

< body onload = "init()" >

< p > 本地数据库 </ p >

<!-- 创建访问数据库的对象

使用事物处理 -->

< P > 使用数据库实现web留言本 </ P >

< table >

< tr >

< td > 姓名： </ td >

< td >< input type = "text" id = "name" /></ td >

</ tr >

< tr >

< td > 留言: </ td >

< td >< input type = "text" id = "memo" /></ td >

</ tr >

< tr >

< td ></ td >

< td >< input type = "button" value = "保存" onclick = "saveData()" /></ td >

</ tr >

</ table >

< hr >

< table id = "datatable" border = "1" ></ table >

< p id = "msg" ></ p >

< script >

// 打开数据库

// datatable 代表页面中的table元素

var datatable = null ;

// db代表openDatabase方法创建的数据库访问对象。

var db = openDatabase ( 'MyData' , '' , 'My Database' , 102400 );

// 初始化函数，网页面中装入数据，调用showAllData()来显示数据

function init () {

datatable = document . getElementById ( "datatable" );

showAllData ();

}

//擦除表中的当前显示的数据，只填入表头。

function removeAllData () {

for ( var i = datatable . childNOdes . length - 1 ; i >= 0 ; i -- ) {

datatable . removeChild ( datatable . childNodes [i]);

}

var tr = document . createElement ( 'tr' );

var th1 = document . createElement ( 'th' );

var th2 = document . createElement ( 'th' );

var th3 = document . createElement ( 'th' );

th1 . innerHTML = "姓名" ;

th2 . innerHTML = "留言" ;

th3 . innerHTML = "时间" ;

tr . appendChild (th1);

tr . appendChild (th2);

tr . appendChild (th3);

datatable . appendChild (tr);

}

// 显示数据，row参数是从数据库中读取到的一行数据。

function showData ( row ) {

var tr = document . createElement ( 'tr' );

var td1 = document . createElement ( 'td' );

td1 . innerHTML = row . name ;

var td2 = document . createElement ( 'td' );

td2 . innerHTML = row . message ;

var td3 = document . createElement ( 'td' );

var t = new Date ();

t . setTime ( row . time );

td3 . innerHTML = t . toLocaleDateString () + " " + t . toLocaleTimeString ();

tr . appendChild (td1);

tr . appendChild (td2);

tr . appendChild (td3);

datatable . appendChild (tr);

}

//显示所有数据，使用transaction 执行executeSql方法获取全部数据。

function showAllData () {

// 数据库的事物

db . transaction ( function () {

tx . executesql ( 'CREATE TABLE IF NOT EXISTS MsgData(name,TEXT,message TEXT,TIME integer)' , []);

tx . executesql ( 'SELECT * FROM MsgData' , [], function ( tx , rs ) {

// removeAllData函数初始化表格；

removeAllData ();

for ( var i = o; i < rs . rows . length ; i ++ ) {

//将数据作为参数传入，在页面上的表格中显示获取的每条数据。

showData ( rs . rows . item (i));

}

});

});

}

//追加数据，将作为参数传入进来的数据保存在数据库中。

function addData ( name , message , time ) {

db . transaction ( function ( tx ) {

tx . executeSql ( 'INSERT INTO MagData VALUES(?,?,?)' , [name, message, time], function ( tx , rs ) {

alert ( "成功保存数据" );

}, function ( tx , error ) {

alert ( error . sourece + "::" + error . message );

});

});

}

// 保存数据：先添加数据，在将添加的数据显示出来。

function saveData () {

var name = document . getElementById ( 'name' ). value ;

var memo = document . getElementById ( 'memo' ). value ;

addData (name, memo, time);

showAllData ();

}

< / script >

</ body >

</ html >