HTML5本地存储之Database Storage应用介绍
HTML5提供了多种本地数据存储机制，其中一种重要的方式是通过数据库进行持久化存储，这种方式特别适合于需要复杂数据结构和查询能力的场景，下面详细介绍HTML5中的Web SQL Database的应用：
关键操作
1、创建数据库：通过openDatabase方法初始化一个数据库访问对象，该方法接受四个参数：
databasename: 用户自定义的数据库名称，用于唯一标识。
version (可选): 数据库的版本号，通常用于数据库升级时的版本管理。
description: 描述数据库的用途或特性。
size: 数据库预分配的最大存储空间，单位为字节。
2、执行事务处理：使用transaction方法执行数据库操作，这是一个异步操作，通过回调函数处理事务，回调函数接收一个tx参数，该参数是Transaction对象，可以用来执行SQL命令。
3、执行SQL语句：executeSql方法是核心操作之一，用于执行SQL查询、插入、更新或删除等操作，它需要四个参数：
sqlQuery: SQL语句，使用占位符（通常是问号?）来表示参数，如INSERT INTO table (column) VALUES (?)。
value1, value2...: SQL语句中占位符对应的参数值，以数组形式传递。
dataHandler: 执行成功时调用的回调函数，通过该函数可以获得查询结果集。
errorHandler: 执行失败时调用的回调函数。
实例应用
以下是一个通讯录管理的示例，展示了如何使用HTML5的数据库支持实现数据的增删查改：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf8"/>
<title>HTML5本地存储之本地数据库篇</title>
<style>
.addDiv{
border: 2px dashed #ccc;
width:400px;
textalign:center;
}
</style>
</head>
<body onload="loadAll()">
<div class="addDiv">
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" class="text"/>
<br/>
<label for="mobilephone">手机：</label>
<input type="text" id="mobilephone" name="mobilephone"/>
<br/>
<label for="company">公司：</label>
<input type="text" id="company" name="company"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
</div>
<br/>
<div id="list">
</div>
<script>
//打开数据库
var db = openDatabase('contactdb','','local database demo',204800);
//保存数据
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value;
//创建时间
var time = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('insert into contact values(?,?,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
});
}
//sql语句执行成功后执行的回调函数
function onSuccess(tx,rs){
alert("操作成功");
loadAll();
}
//sql语句执行失败后执行的回调函数
function onError(tx,error){
alert("操作失败，失败信息："+ error.message);
}
//将所有存储在sqlLite数据库中的联系人全部取出来
function loadAll(){
var list = document.getElementById("list");
db.transaction(function(tx){
//如果数据表不存在，则创建数据表
tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);
//查询所有联系人记录
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = "<table>";
result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>公司</th><th>添加时间</th><th>操作</th></tr>";
for(var i=0;i<rs.rows.length;i++){
var row = rs.rows.item(i);
//转换时间，并格式化输出
var time = new Date();
time.setTime(row.createtime);
var timeStr = time.format("yyyyMMdd hh:mm:ss");
//拼装一个表格的行节点
result += "<tr><td>"+(i+1)+"</td><td>"+row.name+"</td><td>"+row.phone+"</td><td>"+row.company+"</td><td>"+timeStr+"</td><td><input type='button' value='删除' οnclick='del("+row.phone+")'/></td></tr>";
}
list.innerHTML = result;
}else{
list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
}
});
});
}
//删除联系人信息
function del(phone){
db.transaction(function(tx){
//注意这里需要显示的将传入的参数phone转变为字符串类型
tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError);
});
}
//格式化时间的format函数
Date.prototype.format = function(format) {
var o = {
"M+": this.getMonth()+1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth()+3)/3), //quarter
"S": this.getMilliseconds() //milliseconds
};
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
}
}
return format;
};
</script>
</body>
</html>
FAQs常见问题解答
问题1：HTML5中的Web SQL Database和IndexedDB有什么区别？
答：Web SQL Database和IndexedDB都是HTML5提供的本地存储解决方案，但它们有一些关键的区别：
1、Web SQL Database基于SQLite数据库，支持关系型数据库的结构化查询语言（SQL），适用于需要复杂查询和事务处理的场景，但它已经被W3C宣布为弃用标准，未来可能不再被主流浏览器支持。
2、IndexedDB是一种基于JavaScript的对象存储数据库，它不依赖于SQL，而是使用API进行数据操作，IndexedDB支持更复杂的数据结构和高效的查询，并且是未来的推荐标准。
问题2：如何选择合适的本地存储方式？
答：选择本地存储方式应根据实际需求和设备性能来决定：
1、对于简单的存储需求，如存储少量用户设置或会话数据，可以使用Web Storage（包括localStorage和sessionStorage），这些方式简单易用，适合快速原型开发和小量数据存储。
2、对于复杂的结构化数据和需要持久化的情况，可以考虑使用Web SQL Database或IndexedDB，如果需要使用SQL查询和事务处理，可以选择Web SQL Database；如果希望使用更现代且被广泛支持的技术，可以选择IndexedDB。
HTML5本地存储之Database Storage应用介绍
HTML5引入了Database Storage（数据库存储），也称为Web SQL Database，它允许Web应用在用户的浏览器中存储大量结构化数据，这种存储方式是基于SQLite数据库的，因此可以提供类似数据库的操作，如增删改查（CRUD）。
特点
1、数据量大：相比Cookie，Database Storage可以存储更多的数据，通常可达几百MB。
2、结构化数据：支持SQL查询，可以方便地对数据进行操作。
3、离线可用：即使在没有网络的情况下，也可以访问存储的数据。
4、安全：数据存储在本地，且可以设置访问权限。
应用场景
1、用户数据存储：存储用户信息，如姓名、地址、偏好设置等。
2、游戏数据存储：存储游戏进度、得分、成就等。
3、电子商务：存储购物车信息、用户订单等。
4、本地化应用：在离线状态下提供完整的应用体验。
使用方法
1. 创建数据库和表
var db = openDatabase('mydb', '1.0', 'My first database', 2 * 1024 * 1024);
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Note (id INTEGER PRIMARY KEY, note TEXT)');
});
2. 插入数据
db.transaction(function(tx) {
tx.executeSql('INSERT INTO Note (note) VALUES (?)', ['This is a note']);
});
3. 查询数据
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM Note', [], function(tx, rs) {
for (var i = 0; i < rs.rows.length; i++) {
console.log(rs.rows.item(i).note);
}
});
});
4. 更新数据
db.transaction(function(tx) {
tx.executeSql('UPDATE Note SET note = ? WHERE id = ?', ['This is an updated note', 1]);
});
5. 删除数据
db.transaction(function(tx) {
tx.executeSql('DELETE FROM Note WHERE id = ?', [1]);
});
HTML5的Database Storage为Web应用提供了强大的本地数据存储能力，使得应用可以更加丰富和强大，需要注意的是，随着HTML5的更新，Web SQL Database已被废弃，取而代之的是IndexedDB，它提供了更为强大和灵活的存储解决方案。