1、对于简单的数据，使用sessionStorage和localStorage能够很好地完成存取，但是对于处理复杂的关系型数据，它就力不从心了。这也是HTML5的"Web SQL Database"API接口的应用所在。我把它理解成一个HTML5环境下可以用JS执行CRUD的web数据库。
2、三个核心方法
openDatabase:这个方法使用现有的数据库或创建新数据库创建数据库对象
transaction:这个方法允许我们根据情况控制事务提交和回滚
2、三个核心方法
openDatabase:这个方法使用现有的数据库或创建新数据库创建数据库对象
transaction:这个方法允许我们根据情况控制事务提交和回滚
executeSql:这个方法用于执行真实的SQL查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地储存之数据库</title>
</head>
<body>
<span id="one"></span>
<script type="text/javascript">
window.onload = function(){
var one = document.getElementById('one');
if(window.openDatabase){
var database = openDatabase("student","1.0","学生表",1024*1024,function(){
});
/*
参数：
数据库名称
版本号
对数据库的描述
设置数据大小
回调函数(可省略)
*/
if(!database){
alert("数据库创建失败！");
}else{
alert("数据库创建成功！");
}
//创建数据表
database.transaction(function(fx){
fx.executeSql(
"create table if not exists stu (id REAL UNIQUE,name TEXT)",
[],
function(){
alert("表创建成功！");
},
function(){
alert("表创建失败！");
}
);
//插入数据
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("数据更新失败！");
}
);
//删除数据
// fx.executeSql(
// "delete from stu where id=?",
// [1],
// function(){
// one.innerHTML = "";
// },
// function(){
// alert("数据更新失败！");
// }
// );
});
}
}
</script>
</body>
</html>
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
