HTML5基础开发教程 范立锋 于合龙 孙丰伟 第07章__HTML5的数据存储新.pptVIP

7.1 本地数据存储的优势 一个典型的web应用执行流程如下图所示 在服务器与客户端交互过程中，有些数据是固定不变的，不需要来回传递，将这部分数据保存在客户端，将极大提升应用性能。 本地数据存储的优势总结起来主要体现在如下几点： （1）缓解网络压力 （2）降低服务器负担 （3）提升用户体验 7.2 Web Storage 1. Web Storage与Cookie的比较 WebStrage和Cookie都是将信息保存在客户端的技术，两者相似之处在于 （1）二者的数据存储量最大值都有限制，cookie最大可以存储4k的数据，而Web Storage最大可以存储5MB的数据。 （2）二者存储的数据内容都可以被用户创建、修改和删除。 （3）二者都可以被禁止使用。 （4）二者存储的数据空间都是以域名为单位分配的。 （5）基于安全性考虑，二者都不适合存储重要的数据信息。 两者不同之处在于 （1）Web Storage保存数据只能在客户端查询，不能被服务器端访问 （2）Web Storage存储的数据不会随着请求在客户端和服务器端之间来回传递 （3）Web Storage存储的数据，不能明确指定过期时间 2. Web Storage的存储方式 （1）sessionStorage，用于保存会话数据。使用sessionStorage对象保存的数据存储在session对象中，该数据随着session对象生命周期的结束而销毁。 使用sessionStrorage保存数据，需要调用该对象的setItem()方法，应用格式如下 sessionStorage.setItem(key,value) 　参数key为保存数据的名称，参数value为保存数据的值。 　使用sessionStorage读取数据，需要调用该对象的getItem()方法，应用格式如下 sessionStorage.getItem(key) 参数key为保存数据的名称，返回值为对应指定名称的数据值。 （2）localStorage，用于保存本地数据，可长久保存直至用户手动清除。 使用localStorage保存数据和读取数据的方法与sessionStorage对象相同，保存数据需要调用setItem()方法，读取数据需要调用getItem()方法。 此外，localStorage对象还提供了一个清除保存数据信息的方法removeItem()，该方法的应用格式如下 localSotrage.removeItem(key) 其中参数key为要清除的数据信息名称。 7.3 localStorage的多数据操作 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. 删除多条数据信息 除了可以循环遍历localStorage对象逐一调用removeItem方法清除多条数据信息外，还可以调用clear()方法一次性清除所有数据信息。 应用实例如下 function removeAll() { localStorage.clear(); } 7.3 Web SQL 数据库 1. 创建数据库 要想使用Web SQL存储数据，必须创建一个Web SQL数据库或打开一个现有的Web SQL数据库。创建或打开数据库需调用方法openDatabase()，该方法的应用格式如下 openDatabase(daName,dbVersion,dbDescribe, dbSize[,callback()]); 　参数说明如下 （1）dbName：指定数据库的名称 （2）dbVersion：指定数据库的版本号 （3）dbDescribe：指定数据库的描述说明 （4）dbSize：指定数据库的大小，单位为字节 （5）callback()：可选参数，当设定此参数时，可指定成功创建或打开数据库后执行的回调函数 2. 执行数据库操作流程 在Web SQL数据库中的操作，都是按照如下步骤执行的： （1）打开数据库（如果没有指定数据库则需创建数据库） （2）开启一个事务 （3）执行相应的S