第2讲 HTML5 应用程序

1、高级前端技术,PHP课程第二季,第二讲HTML5应用程序,SQLDatabaseIndexdDB,WebSQLDatabase,WebStorage存储本地数据的方法目前可以在许多主流浏览器、平台与设备上实现，与之相关的API也已经标准化，但是，WebStorage存储空间是有5MB，键值存储的方式带来诸多不便，未来本地存储也不仅仅是这一中方法。其中最为熟知的就是WebSQL数据库，它是浏览器内置SQLite数据库，允许使用JavaScript代码控制数据库。,打开与创建数据库,使用格式：openDatabase(DbName,DBVersion,DBDescribe,DBSize,Callb

2、ack();,参数分别表示:数据库名称，版本号，描述，数据库大小（字节为单位），创建或打开成功后执行的回调函数。,db=openDatabase(Student,1.0,StuManage,2*1024*1024,function()alert(成功创建数据库););db.transaction(function(tx)/执行创建表语句varsql=createtableifnotexistsstudent(snounique,nametext,sextext,scoreint);tx.executeSql(sql););,示例：,执行事务,通过数据库对象中的transaction方法执行事务

3、处理。每一个事物处理请求都作为数据库的独立操作，这有效地避免在处理数据时发生冲突。调用语法格式如下：,参数分别表示：事务回调函数，出错回调函数，成功回调函数。,transaction(TransCallback,ErrorCallback,SuccessCallback);,执行语句,transaction.executeSql(strSQL,arguments,SuccessCallback,ErrorCallback);,varsql=createtableifnotexistsstudent(sno,name,sex,score);db.transaction(function(tx)t

4、x.executeSql(sql,function()alert(语句执行成功);,function()alert(语句执行失败););,参数分别是：待执行的语句，需要的实参，成功回调函数，失败回调函数。,使用示例：,执行查询,varsql=select*fromstudent;db.transaction(function(tx)tx.executeSql(sql,function(tx,rs)/数据条数alert(rs.rows.length);/获得第一条第一列数据alert(rs.rows.item(0).stuName);,function()alert(语句执行失败););,使用示

5、例：,IndexedDB介绍,1.和cookies类似，IndexedDB是每个域名独立存储数据的。但比cookies方便。2.和WebStorage比，IndexedDB可以存储任意格式的jsonobject。3.和websqldatabase类似，IndexedDB也分数据库，每个数据库可以建立多个不同配置的表。IndexedDB直接通过JSAPI完成操作。sqldatabase已被w3c废除。,IndexedDB是HTML5中的一种数据存储方式。用来帮助网站，在浏览器本地，存储结构比较复杂的数据。它是一种轻量级NOSQL数据库。,什么是NoSQL,NoSQL(NoSQL=NotOnlyS

6、QL)，意即“不仅仅是SQL”，是一项全新的数据库革命性运动，早期就有人提出，发展至2009年趋势越发高涨。NoSQL的拥护者们提倡运用非关系型的数据存储，相对于铺天盖地的关系型数据库运用，这一概念无疑是一种全新的思维的注入。,IndexedDB数据结构,Database,varrequest=indexedDB.open(databasename,version);,打开数据库,数据库无需创建直接打开，如果不存在则自动创建。格式如下：,open方法是异步方法，我们在这里需要处理它的回调函数即可。例如：,request.onsuccess=function(e)/打开后处理事件request.

7、onerror=function(event)/错误处理事件request.onupgradeneeded=function(e)/版本号更改处理事件,参数Version可能不好理解，IDB不允许数据库中的表在同一个版本中发生变化，所以当我们创建新表或删除旧表的时候，必须使用一个不一样的版本号。他的作用在于避免重复修改数据库的表结构。,创建表,db.createObjectStore(storename,option);,在onupgradeneeded事件处理函数中,建议初始化创建表,表在indexedDB中被表称为ObjectStore。,request.onupgradeneeded=f

8、unction(e)vardb=request.result;if(!db.objectStoreNames.contains(users)/创建Store，声明主键自动增长varobjectStore=db.createObjectStore(users,keyPath:id,autoIncrement:true);/创建索引，参数:索引名称,字段名,选项objectStore.createIndex(by_name,name,unique:true);,创建表：,创建索引,objectStore.createIndex(by_name,name,unique:true);objectSto

9、re.createIndex(by_city,city);,创建索引：,删除索引：,objectStore.deleteIndex(by_name);,增加数据,vartransaction=db.transaction(users,readwrite);/通过transaction得到ObjectStorevarobjectStore=transaction.objectStore(users);/添加数据objectStore.add(name:user1,pwd:123,age:18s);objectStore.add(name:user2,pwd:123,age:18s);,通过上面I

10、DBDatabase对象，我们可以取得transaction。在indexedDB中，操作数据都需要事务，事务会自动提交或回滚。所以无需手动commit或者rollback。,打开事务选项：readonly只读readwrite可读可写,删除数据,vartransaction=db.transaction(users,readwrite);varobjectStore=transaction.objectStore(users);request=objectStore.delete(key);,request.onsuccess=function().;request.onerror=func

11、tion().;,成功与错误处理：,根据主键删除：,清空数据,vartransaction=db.transaction(users,readwrite);varobjectStore=transaction.objectStore(users);objectStore.clear();,清空所有的数据：,更新数据,vartransaction=db.transaction(users,readwrite);varobjectStore=transaction.objectStore(users);delrequest=objectStore.delete(key);/先删除delreques

12、t.onsuccess=function(e)/删除成功后添加objectStore.add(curRec);,更新数据要先进行删除，然后在添加。,查询所有,/打开游标，遍历users中所有数据varrequest=objectStore.openCursor();request.onsuccess=function(event)varcursor=request.result;if(cursor)varkey=cursor.key;varrowData=cursor.value;alert(rowD);cursor.continue();,索引查询,/获得索引varindex=objectStore.index(by_name);varrequest=index.get(Zhangsan);request.onsuccess=function()varma