HTML5 web存储—web SQL

什么是web SQL?

我们经常在应用程序中大量处理结构化数据,HTML5引入了web SQL database概念,它允许应用程序通过异步的Javascript接口来访问SQLlite数据库。但目前web SQL并不在HTML5的规范中,而是一个单独的规范,Safari、Chrome、Oprea浏览器支持web SQL。

三个核心方法

Web SQL Database 规范中定义的三个核心方法:

  • openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象
  • transaction:这个方法允许我们根据情况控制事务提交或回滚
  • executeSql:这个方法用于执行SQL 查询

openDatabase

语法:var db = openDatabase(name,version,displayName,estimatedSize,creationCallback);
name:数据库名字
version:数据库版本号
displayName:数据库描述
estimatedSize:数据库保存数据大小,以字节为单位
creationCallback:回调函数,非必须

transaction

transaction方法用以处理事务,当一条语句执行失败的时候,整个事务回滚。方法有三个参数:包含事务内容的一个方法、执行成功回调函数(可选)、执行失败回调函数(可选)。

db.transaction(function (context) {
           context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")'); });

这个例子中我们创建一个表testTable,并在表中插入三条数据,四条执行语句任何一条出错,整个事务都会回滚。

executeSql

executeSql方法用以执行SQL语句,返回结果,方法有四个参数:
- 查询字符串
- 用以替换查询字符串中问号的参数
- 执行成功回调函数(可选)
- 执行失败回调函数(可选)
语法:
trans.executeSql(sql,[],function(){trans,data},function(trans,msg){});

示例

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>web SQL demo</title>
    <script src="jquery-3.0.0.min.js"></script>
    <script> //创建或连接数据库 function getDb() { var db = openDatabase("data.db","1.0","demo",1024*1024); return db; } //初始化数据库 function initDb() { var db = getDb(); if(db == null) { alert("你的浏览器不支持web SQL"); return null; } db.transaction(function(trans){ trans.executeSql("create table if not exists demo(name text null,title text null,content text null)",[],function(trans,result){}, function(trans,error){alert(error)}) }); } $(function(){ var db = getDb(); initDb(); $("#btnSave").click(function(){ var name = $("#name").val(); var title = $("#title").val(); var content = $("#content").val(); //执行sql脚本来插入数据 db.transaction(function(trans){ trans.executeSql("insert into demo(name,title,content)values(?,?,?)", [name,title,content], function(trans,success){}, function(trans,error){alert(error);} ); showAll(); }); }); }) //显示所有数据 function showAll() { $("#tblData").empty(); var db = getDb(); db.transaction(function(trans){ trans.executeSql("select * from demo",[],function(trans,data){ //获取查询到的数据 if(data) { for(var i=0;i<data.rows.length;i++) { //获取一行json数据,将数据拼接成表格 appendDataToTable(data.rows.item(i)); } } },function(trans,error){alert(error);}); }); } function appendDataToTable(data) { var name = data.name; var title = data.title; var content = data.content; var strHtml = ""; strHtml += "<tr>"; strHtml += "<td>"+name+"</td>"; strHtml += "<td>"+title+"</td>"; strHtml += "<td>"+content+"</td>"; strHtml += "</tr>"; $("#tblData").append(strHtml); } </script>
</head>
<body>
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="name" id="name" required/></td>
        </tr>
        <tr>
            <td>标题</td>
            <td><input type="text" name="title" id="title" required/></td>
        </tr>
        <tr>
            <td>留言</td>
            <td><input type="text" name="content" id="content" required/></td>
        </tr>
    </table>
    <input type="button" value="保存" id="btnSave"/>
    <br/>
    <input type="button" value="展示所有数据" onclick="showAll();"/>
    <table id="tblData"></table>
</body>
</html>

运行结果如下:
HTML5 web存储—web SQL_第1张图片

你可能感兴趣的:(HTML5 web存储—web SQL)