第07章__HTML5的数据存储讲解.ppt

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，将数据保存在session对象中，所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，即浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。 （2）localStorage，将数据保存在客户端本地的硬件设备中，即使关闭了浏览器，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。 这两种不同的存储类型区别在于：sessionStorage为临时保存，而localStorage为永久保存。 sessionStrorage保存数据和读取数据 使用sessionStrorage保存数据，需要调用该对象的setItem()方法，应用格式如下 sessionStorage.setItem(key,value) 　参数key为保存数据的名称，参数value为保存数据的值。 　使用sessionStorage读取数据，需要调用该对象的getItem()方法，应用格式如下 sessionStorage.getItem(key) 参数key为保存数据的名称，返回值为对应指定名称的数据值。 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：指定数据库的