阅读量:0
HTML5 Database Storage（也称为Web SQL或IndexedDB）是一种在客户端存储大量结构化数据的方法，它允许网页在用户的浏览器中创建、查询和管理数据库。
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，它提供了更为强大和灵活的存储解决方案。
