第2讲 HTML5 应用程序..

高级前端技术PHP课程第二季第二讲HTML5应用程序SQLDatabaseIndexdDBWebSQLDatabaseWebStorage存储本地数据的方法目前可以在许多主流浏览器、平台与设备上实现，与之相关的API也已经标准化，但是，WebStorage存储空间是有5MB，键值存储的方式带来诸多不便，未来本地存储也不仅仅是这一中方法。其中最为熟知的就是WebSQL数据库，它是浏览器内置SQLite数据库，允许使用JavaScript代码控制数据库。打开与创建数据库使用格式：openDatabase(DbName,DBVersion,DBDescribe,DBSize,Callback());参数分别表示:数据库名称，版本号，描述，数据库大小（字节为单位），创建或打开成功后执行的回调函数。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方法执行事务处理。每一个事物处理请求都作为数据库的独立操作，这有效地避免在处理数据时发生冲突。调用语法格式如下：参数分别表示：事务回调函数，出错回调函数，成功回调函数。transaction(TransCallback,ErrorCallback,SuccessCallback);执行语句transaction.executeSql(strSQL,[arguments],SuccessCallback,ErrorCallback);varsql='createtableifnotexistsstudent(sno,name,sex,score);';db.transaction(function(tx){tx.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(语句执行失败);});使用示例：IndexedDB介绍1.和cookies类似，IndexedDB是每个域名独立存储数据的。但比cookies方便。2.和WebStorage比，IndexedDB可以存储任意格式的jsonobject。3.和websqldatabase类似，IndexedDB也分数据库，每个数据库可以建立多个不同配置的表。IndexedDB直接通过JSAPI完成操作。sqldatabase已被w3c废除。IndexedDB是HTML5中的一种数据存储方式。用来帮助网站，在浏览器本地，存储结构比较复杂的数据。它是一种轻量级NOSQL数据库。什么是NoSQLNoSQL(NoSQL=NotOnlySQL)，意即“不仅仅是SQL”，是一项全新的数据库革命性运动，早期就有人提出，发展至2009年趋势越发高涨。NoSQL的拥护者们提倡运用非关系型的数据存储，相对于铺天盖地的关系型数据库运用，这一概念无疑是一种全新的思维的注入。IndexedDB数据结构Databasevarrequest=indexedDB.open(databasename,version);打开数据库数据库无需创建直接打开，如果不存在则自动创建。格式如下：open方法是异步方法，我们在这里需要处理它的回调函数即可。例如：request.onsuccess=function(e){//打开后处理事件……}request.onerror=function(event){//错误处理事件……}request.onupgradeneeded=function(e){//版本号更改处理事件……}参数Version可能不好理解，IDB不允许数据库中的表在同一个版本中发生变化，所以当我们创建新表或删除旧表的时候，必须使用一个不一样的版本号。他的作用在于避免重复修改数据库的表结构。创建表db.createObjectStore(storename,option);在onupgradeneeded事件处理函数中,建议初始化创建表,表在indexedDB中被表称为ObjectStore。request.onupgradeneeded=function(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});objectStore.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});通过上面IDBDatabase对象，我们可以取得transaction。在indexedDB中，操作数据都需要事务，事务会自动提交或回滚。所以无需手动commit或者rollback。打开事务选项：readonly只读readwrite可读可写删除数据vartransaction=db.transaction([users],readwrite);varobjectStore=transaction.objectStore(users);request=objectStore.delete(key);request.onsuccess=function(){....};request.onerror=function(){...};成功与错误处理：根据主键删除：清空数据vartransaction=db.transaction([users],readwrite);varobjectStore=transaction.objectStore(users);objectStore.clear();清空所有的数据：更新数据vartransaction=db.transaction([users],readwrite);varobjectStore=transaction.objectStore(users);delrequest=objectStore.delete(key);//先删除delrequest.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(rowData.name);cursor.continue();}}索引查询//获得索引varindex=objectStore.index(by_name);varrequest=index.get(Zhangsan);request.onsuccess=function(){varmatching=request.result;console.log(matching.sex);console.log(matching.pwd);};删除库/删除表indexedDB.deleteDatabase(databasename);db.deleteObjectStore(customers)删除库：删除表：好好学习、幸福生活！学习决定于心态！我如何学习好呢？