基于HTML5的WebDataBase可以让你在浏览器中进行数据持久地存储管理和有效查询，假设你的离线应用程序有需要规范化的存储功能
本文讲述如何使用
1.新建一个网页，比如：test.html 内容如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>web sql database</title>
<script type='text/javascript' src='jquery-1.4.3.js'></script>
<script type="text/javascript">
$(function(){
if (!window.openDatabase) {
alert("不支持");
}
else {
initDB();
createTables();
}
function initDB(){
var shortName = 'localDB';
var version = '1.0';
var displayName = 'localDB table';
var maxSize = 655350; // in bytes
//window.openDatabase("数据库名字", "版本","数据库描述",数据库大小);
localDB = window.openDatabase(shortName, version, displayName, maxSize);
}
function createTables(){
var query = 'CREATE TABLE IF NOT EXISTS user(id INTEGER NOT NULL, username TEXT NOT NULL);';
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [], null, null);
});
}
catch (e) {
console.log("create table failed");
alert("建表失败");
return;
}
}
});
function btnClick(){
var username = $("#username").val();
try {
localDB.transaction(function(transaction){
transaction.executeSql("insert into user(id,username) values(?,?)", [1,username]);
});
}
catch (e) {
console.log("insert into failed");
alert("插入失败");
return;
}
console.log("insert into success");
//alert("insert into success");
}
function btnSelect(){
localDB.transaction(function(tx) {
tx.executeSql("select * from user", [],
function(tx, result) {
$("#result").empty();
for(var i = 0; i < result.rows.length; i++){
$("#result").append('<b>' +result.rows.item(i)['id']+"------" +result.rows.item(i)['username']+ '</b><br />');
}
}, function(){
alert("error");
});
});
}
</script>
</head>
<body>
<div id="my" style="height:100px;width:200px;border:1px solid red;">
<input type="text" name="username" id="username" value=""/>
<br/>
<button onclick="btnClick()">insert</button>
</div>
<div id="my1" style="height:300px;width:200px;border:1px solid red;">
<button onclick="btnSelect()">select</button>
<div id="result" style="height:300px;width:200px;border:1px solid blue;">
</div>
</div>
</body>
</html>
2.注意引入js文件哦
3.已经ok，直接打开网页浏览 最好用谷歌浏览器，然后 按 F12键 查看 Resources --Web SQL 下面有新建的数据库以及表
分享到：
相关推荐
----------Database-------------- 1.DataTable帮助类（DataTableHelper.cs） 2.Access数据库文件操作辅助类（JetAccessUtil.cs） 5.查询条件组合辅助类（SearchCondition.cs） 6.查询信息实体类(SearchInfo.cs)...
目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源的程序ExtJS, ...
第11章 HTML 5的新特性 221 视频讲解：6分钟 11.1 谁在开发HTML 5 222 11.2 HTML 5的新认识 222 11.2.1 兼容性 222 11.2.2 实用性和用户优先 222 11.2.3 化繁为简 223 11.3 无插件范式 223 11.4 ...
主要有两种类型，一种是类似QQ，MSN类型的，需要用户安装软件才能聊天，另一种即是只需打开WEB浏览器就可以聊天的，类似QQ聊天室的功能 ，本系统的目标即模仿QQ聊天室，开发一个简单的能在机房里供大家聊天的Web程序...
-Grid中TemplateField生成到页面中控件具有唯一ID，例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...
十天学会ASP.net(5) 作者：佚名 阅读人次：8013 文章来源：未知 发布时间：2005-6-24 网友评论(6)条 第五天 学习目的：学会连接两种数据库 对于ASP来说，我们常用的数据库无非是ACCESS和SQL SERVER，对于ASP...
ASP．NET 2．0在Web应用程序开发方面迈出了革命性的一步，新增了50多个服务器控件，类的数量也增加了一倍，其他许多方面也有很重大的变化。ASP．NET 2．0的目标是提高开发人员的效率、改善应用程序的性能和可伸缩性...
功能模块 1.手机任务面，一个手机版的任务需要，支持雇主入住发布任务，用户是雇主也是做任务可以自己发任务，做任务。 2.雇主发布任务需要付保证金，用户完成任务后就会付佣金，从保证金里面扣，雇主每发任务平台...
这里还有一些顶尖的技术因素是CuteEditor编辑器成为你编辑和发布Web内容的最佳选择： 界面简洁加载速度快 <br/>由于才有了很多优化方法，所以CuteEditor非常简单、小巧、装载速度快，但仍然保持功能强大...
7.9.5 错误处理的新选项 177 7.10 小 结 178 第二部分 操作和显示数据 179 第8章 用查询最大限度地利用数据 181 8.1 Access使用查询的位置 181 8.1.1 在窗体或报表的记录源属性中使用查询 182 8.1.2 ...
7.9.5 错误处理的新选项 177 7.10 小 结 178 第二部分 操作和显示数据 179 第8章 用查询最大限度地利用数据 181 8.1 Access使用查询的位置 181 8.1.1 在窗体或报表的记录源属性中使用查询 182 8.1.2 设置用户...
9.5.2. Create a date from database 9.5.3. Create dates from an array 9.6. Constants for General Date Functions 9.6.1. Using Constants 9.6.2. List of All Constants 9.6.3. Self-Defined OUTPUT ...
（5）方便用户的操作，尽量减少用户的操作。 1.3 项目提出的意义 随着高校办学规模的扩大和招生人数的增加，学生成绩管理维护是学校管理中异常重要的一个环节，作为学校，除了育人，就是育知，学生成绩管理的...