《HTML5基础开发教程 教学课件 ppt 作者 范立锋 于合龙 孙丰伟 第07章__HTML5的数据存储》由会员分享，可在线阅读，更多相关《HTML5基础开发教程 教学课件 ppt 作者 范立锋 于合龙 孙丰伟 第07章__HTML5的数据存储（9页珍藏版）》请在金锄头文库上搜索。
1、第7章 HTML5的数据存储,7.1 本地数据存储的优势,7.2 Web Storage,7.3 Web SQL 数据库,7.1 本地数据存储的优势,一个典型的web应用执行流程如下图所示 在服务器与客户端交互过程中，有些数据是固定不变的，不需要来回传递，将这部分数据保存在客户端，将极大提升应用性能。 本地数据存储的优势总结起来主要体现在如下几点： （1）缓解网络压力 （2）降低服务器负担 （3）提升用户体验,服务器,客户端,接收并处理请求后将处理结果及相应数据返回客户端,向服务器端发送请求及相应数据信息,7.2 Web Storage,1. Web Storage与Cookie的比较 Web
2、Strage和Cookie都是将信息保存在客户端的技术，两者相似之处在于 （1）二者的数据存储量最大值都有限制，cookie最大可以存储4k的数据，而Web Storage最大可以存储5MB的数据。 （2）二者存储的数据内容都可以被用户创建、修改和删除。 （3）二者都可以被禁止使用。 （4）二者存储的数据空间都是以域名为单位分配的。 （5）基于安全性考虑，二者都不适合存储重要的数据信息。 两者不同之处在于 （1）Web Storage保存数据只能在客户端查询，不能被服务器端访问 （2）Web Storage存储的数据不会随着请求在客户端和服务器端之间来回传递 （3）Web Storage存储的
3、数据，不能明确指定过期时间,2. Web Storage的存储方式 （1）sessionStorage，用于保存会话数据。使用sessionStorage对象保存的数据存储在session对象中，该数据随着session对象生命周期的结束而销毁。 使用sessionStrorage保存数据，需要调用该对象的setItem()方法，应用格式如下 sessionStorage.setItem(key,value) 参数key为保存数据的名称，参数value为保存数据的值。 使用sessionStorage读取数据，需要调用该对象的getItem()方法，应用格式如下 sessionStorage.
4、getItem(key) 参数key为保存数据的名称，返回值为对应指定名称的数据值。 （2）localStorage，用于保存本地数据，可长久保存直至用户手动清除。,使用localStorage保存数据和读取数据的方法与sessionStorage对象相同，保存数据需要调用setItem()方法，读取数据需要调用getItem()方法。 此外，localStorage对象还提供了一个清除保存数据信息的方法removeItem()，该方法的应用格式如下 localSotrage.removeItem(key) 其中参数key为要清除的数据信息名称。,7.3 localStorage的多数据操作,
5、1. 读取多条数据信息 要想读取localStorage中存储的多条数据信息，需要借助循环语句以及localStorage对象的key和length属性。其中key属性的作用是可以通过指定索引编号获取对应的存储数据，length属性的作用是获取localstorage对象存储数据数量。 应用实例如下 for(var i=0; ilocalStorage.length; i+) var key = localStorage.key(i); /通过key属性及索引编号获取名称 var value = localStorage.getItem(key); /通过名称获取数据值 / ,2. 删除多条数
6、据信息 除了可以循环遍历localStorage对象逐一调用removeItem方法清除多条数据信息外，还可以调用clear()方法一次性清除所有数据信息。 应用实例如下 function removeAll() localStorage.clear(); ,7.3 Web SQL 数据库,1. 创建数据库 要想使用Web SQL存储数据，必须创建一个Web SQL数据库或打开一个现有的Web SQL数据库。创建或打开数据库需调用方法openDatabase()，该方法的应用格式如下 openDatabase(daName,dbVersion,dbDescribe, dbSize,callba
7、ck(); 参数说明如下 （1）dbName：指定数据库的名称 （2）dbVersion：指定数据库的版本号 （3）dbDescribe：指定数据库的描述说明 （4）dbSize：指定数据库的大小，单位为字节 （5）callback()：可选参数，当设定此参数时，可指定成功创建或打开数据库后执行的回调函数,2. 执行数据库操作流程 在Web SQL数据库中的操作，都是按照如下步骤执行的： （1）打开数据库（如果没有指定数据库则需创建数据库） （2）开启一个事务 （3）执行相应的SQL语句 3. 执行SQL语句 在Web SQL中执行SQL语句，需要调用事务对象的executeSql()方法。该方法调用格式如下 tx.executeSql(sql语句, params , function(tx,rs), function(tx,error) ); 其中“params”为SQL语句中所需参数对应值，如果SQL语句不需额外参数，“params”可置空。“function(tx,rs)”为SQL语句成功执行后的回调函数，其中参数“rs”为执行语句后的返回值，例如SQL语句为查询语句时，将返回查询结果集。“function(tx,error)”为SQL语句执行失败后的回调函数。,
