《HTML5程序设计及实践》课件第7章 HTML5 Web存储

第7章HTML5Web存储目录Web存储WebSQLDatabase索引数据库认识Web存储两种Web存储方式会话存储（SessionStorage）：它的访问性上只限于当前页面，并且页面关闭后会消失，通过sessionStorage进行访问。本地存储（LocalStorage）：没有时间限制的数据存储，通过localStorage进行访问。WebStorage和Cookie的异同网络传输：Cookie会随着请求发送到服务器端，而WebStorage数据存在客户端，不会与服务器发交互。存储限制：Cookie存储的数据大小限制为4KB，而WebStorage能够提供更大容量的存储设计，根据浏览器不同，可以存储5MB左右的数据。数据接口：WebStorage提供丰富的数据接口，开发人员可以方便的访问数据，而Cookie则需要开发人员自行开发接口。存储空间：WebStorage每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。Web存储API函数名功能length存储的键/值对的数量key(n)返回存储的第N个键。getItem(key)返回键key对应的值。如果值不存在，则返回空null。注意，返回的值是一个字符串。如果你存储的值是整数或布尔型，你需要类型转换。setItem(key,value)把值插入到key键中removeItem(key)移除某个键对应的值（包含键本身）。如果键不存在，此方法什么也不做。clear清空存储的键/值数据WebSQLDatabaseWebSQLDatabase允许应用程序通过一个异步JavaScript接口访问SQLLite数据库，HTML5的WebSQLDatabaseAPI有三个核心的方法

函数功能openDatabase()打开数据库或者创建新的数据库transaction()控制事务的提交和回滚executeSql()执行SQL语句WebSQLDatabase打开数据库：使用openDatabase（）方法打开数据库，如果该数据库不存在，则创建新的数据库。该方法包含五个参数：数据库名、版本号、描述、数据库大小、回调函数，其中回调函数可以省略。通过事务执行SQL：transaction()方法接收一个方法作为参数，在该方法中执行SQL脚本vardb=openDatabase('student','1.0',’StudentInfo',5*1024);vardb=openDatabase('student','1.0','StudentInfo',5*1024);db.transaction(function(tx){ tx.executeSql('CREATETABLEstudentinfo(idINTEGER,nameTEXT)'); tx.executeSql('INSERTINTOstudentinfo(id,name)Values(1,"zhangsan")');});索引数据库WebSQLDatabase已被较新的规范——索引数据库所取代，目前浏览器正在逐步实现对索引数据库的支持。索引数据库以window.indexDB作为入口，但各个浏览器增加了前缀，获取方式一般采用。采用command->request->result的调用方式，比如打开数据库，返回一个request，在request的result中得到返回的数据库引用。varindexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB;索引数据库打开数据库onupgradeneeded这个回调函数：当数据库发生改变时调用。比如，当某个数据库不存在需要创建，或者数据库更改时。一般在该回调函数内创建objectStore，相当于数据库中的一张表。varpeopleData=[{name:"JohnDow",email:"john@"},{name:"DonDow",email:"don@"}];vardb;varrequest=indexedDB.open("PeopleDB",1);request.onsuccess=function(evt){db=request.result;};request.onerror=function(evt){console.log("IndexedDBerror:"+evt.target.errorCode);};request.onupgradeneeded=function(evt){varobjectStore=evt.currentTarget.result.createObjectStore("people",{keyPath:"id",autoIncrement:true});objectStore.createIndex("name","name",{unique:false});objectStore.createIndex("email","email",{unique:true});for(iinpeopleData){objectStore.add(peopleData[i]);}};索引数据库插入数据//界面控件数据获取varname=document.getElementById('txtName').valuevaremail=document.getElementById('txtEmail').value;//事务vartransaction=db.transaction("people","readwrite");//对象库varobjectStore=transaction.objectStore("people");//添加对象

varrequest=objectStore.add({name:name,email:email});request.onsuccess=function(event){

};索引数据库浏览数据//输出区域varoutput=document.getElementById('printOutput');output.textContent="";//事务vartransaction=db.transaction("people","readwrite");varobjectStore=transaction.objectStore("people");//打开数据表varrequest=objectStore.openCursor();request.onsuccess=function(event){varcursor=event.target.result;if(cursor){output.textContent+="id:"+cursor.key+"is"+