html5本地存储之数据库
2017-05-27 11:25
309 查看
对于简单的数据，使用sessionStorage和localStorage
能够很好地完成存取，但是对于处理复杂的关系型数据，
它就力不从心了。这也是 HTML 5 的“Web SQL
Database”API 接口的应用所在。我把它理解成一个
Html5环境下可以用Js执行CRUD的Web数据库
三个核心方法
①openDatabase：这个方法使用现有数据库或创建新数
据库创建数据库对象。
②transaction：这个方法允许我们根据情况控制事务提
交或回滚。
③executeSql：这个方法用于执行真实的SQL查询
表“stu”创建成功，数据插入成功
数据删除成功，表“stu”现在为空表
表“stu”删除成功，student数据库里没有数据表
<!doctype html>
<html>
<head>
</head>
<body>
<script>
window.onload=function () {
var one=document.getElementById("one");
if(window.openDatabase){
//参数：A.数据库名称。B.版本号
目前为1.0。C.对数据库的描述。D.设置数据的大小。E.回调函数(可省略）
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
dataBase.transaction(function (fx) {
//创建一个表
fx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function () {
alert("表创建成功");
},
function () {
alert("创建表失败");
}
);
executeSql函数有四个参数，其意义分别是：
1
）表示查询的字符串，使用的SQL语言是SQLite 3.6.19。
2）插入到查询中问号所在处的字符串数据。
3）成功时执行的回调函数。返回两个参数：tx和执行的结果。
4）一个失败时执行的回调函数。返回两个参数：tx和失败的错误信息。
//插入数据
fx.executeSql(
"insert into stu (id ,name) values(?,?)",
[1,"张三"],
function () {
alert("数据插入成功");
},
function () {
alert("数据插入失败");
}
);
//更新数据
fx.executeSql(
"update stu set name=? where id=?",
["李四",1],
function () {
alert("数据更新成功");
},
function () {
alert("数据更新失败");
}
);
//查询数据
fx.executeSql(
"select * from stu",
[],
function (fx,result) {
for (var i=0; i<result.rows.length; i++) {
one.innerHTML+=result.rows.item (i)["name"];
}
alert("数据查询成功")
},
function () {
alert("数据查询失败");
}
);
参数说明:
result是查询到的结果集， 其中最重要的属性—SQLResultSetRowList类型的
rows 是数据集的“行”。
rows
有两个属性：length、
item 。
length代表总条数，用item(num),可访问到具体的行。
//删除数据
fx.executeSql(
"delete from stu where id=?",
[1],
function () {
one.innerHTML="";
alert("数据删除成功");
},
function () {
alert("删除失败");
}
);
//删除表
fx.executeSql(
"drop table stu",
[],
function () {
alert("表删除成功");
},
function () {
alert("表删除失败");
}
);
});
}
}
</script>
<div id="one">
</div>
</body>
</html>
结束语
本文介绍了 HTML5 的 Web SQL Database 特点，对其 API 进行介绍。需要注意的是，如果不是绝对需要，不要使用 Web SQL Database，因为它会让我们的代码更加复杂（匿名内部类的内部函数，回调函数等等）。对大多数情况下，本地存储或会话存储就能够完成相应的任务，尤其是你能够保持对象状态持久化的情况。通过这些 HTML5 Web SQL Database API 接口，可以获得更多功能，相信以后会出现一些非常优秀的、建立在这些
API 之上的应用程序。
能够很好地完成存取，但是对于处理复杂的关系型数据，
它就力不从心了。这也是 HTML 5 的“Web SQL
Database”API 接口的应用所在。我把它理解成一个
Html5环境下可以用Js执行CRUD的Web数据库
三个核心方法
①openDatabase：这个方法使用现有数据库或创建新数
据库创建数据库对象。
②transaction：这个方法允许我们根据情况控制事务提
交或回滚。
③executeSql：这个方法用于执行真实的SQL查询
表“stu”创建成功，数据插入成功
数据删除成功，表“stu”现在为空表
表“stu”删除成功，student数据库里没有数据表
<!doctype html>
<html>
<head>
</head>
<body>
<script>
window.onload=function () {
var one=document.getElementById("one");
if(window.openDatabase){
//参数：A.数据库名称。B.版本号
目前为1.0。C.对数据库的描述。D.设置数据的大小。E.回调函数(可省略）
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
dataBase.transaction(function (fx) {
//创建一个表
fx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function () {
alert("表创建成功");
},
function () {
alert("创建表失败");
}
);
executeSql函数有四个参数，其意义分别是：
1
）表示查询的字符串，使用的SQL语言是SQLite 3.6.19。
2）插入到查询中问号所在处的字符串数据。
3）成功时执行的回调函数。返回两个参数：tx和执行的结果。
4）一个失败时执行的回调函数。返回两个参数：tx和失败的错误信息。
//插入数据
fx.executeSql(
"insert into stu (id ,name) values(?,?)",
[1,"张三"],
function () {
alert("数据插入成功");
},
function () {
alert("数据插入失败");
}
);
//更新数据
fx.executeSql(
"update stu set name=? where id=?",
["李四",1],
function () {
alert("数据更新成功");
},
function () {
alert("数据更新失败");
}
);
//查询数据
fx.executeSql(
"select * from stu",
[],
function (fx,result) {
for (var i=0; i<result.rows.length; i++) {
one.innerHTML+=result.rows.item (i)["name"];
}
alert("数据查询成功")
},
function () {
alert("数据查询失败");
}
);
参数说明:
result是查询到的结果集， 其中最重要的属性—SQLResultSetRowList类型的
rows 是数据集的“行”。
rows
有两个属性：length、
item 。
length代表总条数，用item(num),可访问到具体的行。
//删除数据
fx.executeSql(
"delete from stu where id=?",
[1],
function () {
one.innerHTML="";
alert("数据删除成功");
},
function () {
alert("删除失败");
}
);
//删除表
fx.executeSql(
"drop table stu",
[],
function () {
alert("表删除成功");
},
function () {
alert("表删除失败");
}
);
});
}
}
</script>
<div id="one">
</div>
</body>
</html>
结束语
本文介绍了 HTML5 的 Web SQL Database 特点，对其 API 进行介绍。需要注意的是，如果不是绝对需要，不要使用 Web SQL Database，因为它会让我们的代码更加复杂（匿名内部类的内部函数，回调函数等等）。对大多数情况下，本地存储或会话存储就能够完成相应的任务，尤其是你能够保持对象状态持久化的情况。通过这些 HTML5 Web SQL Database API 接口，可以获得更多功能，相信以后会出现一些非常优秀的、建立在这些
API 之上的应用程序。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 LocalStorage 本地存储JSON数据
- html5 之本地数据存储
- HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
- HTML5 LocalStorage 本地存储JSON数据
- HTML5 LocalStorage 本地存储JSON数据
- html5的页面缓存和本地数据存储支持
- html5使用local storage存储的数据在本地是以何种形式保存的
- cocos2d-html5开发之本地数据存储
- 使用HTML5实现本地数据存储（一）
- js 通过post方式打开页面 利用html5本地存储获取数据
- html5本地存储-遍历以及清空数据
- HTML5 LocalStorage 本地存储JSON数据
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- HTML5 本地存储数据
- HTML5 本地数据存储
- cocos2d-html5开发之本地数据存储
- html5-web本地存储
- 内表数据下载到本地存储实例
- C#数据本地存储方案之SQLite
- 数据缓存与本地存储