HTML5基础开发教程 教学课件 作者 范立锋 于合龙 孙丰伟 第07章__HTML5的数据存储.ppt

《HTML5基础开发教程 教学课件 作者 范立锋 于合龙 孙丰伟 第07章__HTML5的数据存储.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章HTML5的数据存储7.1本地数据存储的优势7.2WebStorage7.3WebSQL数据库7.1本地数据存储的优势一个典型的web应用执行流程如下图所示在服务器与客户端交互过程中，有些数据是固定不变的，不需要来回传递，将这部分数据保存在客户端，将极大提升应用性能。本地数据存储的优势总结起来主要体现在如下几点：（1）缓解网络压力（2）降低服务器负担（3）提升用户体验服务器客户端接收并处理请求后将处理结果及相应数据返回客户端向服务器端发送请求及相应数据信息7.2WebStorage1.WebStorage与Cookie的比较WebStrage和Cookie

2、都是将信息保存在客户端的技术，两者相似之处在于（1）二者的数据存储量最大值都有限制，cookie最大可以存储4k的数据，而WebStorage最大可以存储5MB的数据。（2）二者存储的数据内容都可以被用户创建、修改和删除。（3）二者都可以被禁止使用。（4）二者存储的数据空间都是以域名为单位分配的。（5）基于安全性考虑，二者都不适合存储重要的数据信息。两者不同之处在于（1）WebStorage保存数据只能在客户端查询，不能被服务器端访问（2）WebStorage存储的数据不会随着请求在客户端和服务器端之间来回传递（3）WebStorage存储的数据，不能明确指定过

3、期时间2.WebStorage的存储方式（1）sessionStorage，用于保存会话数据。使用sessionStorage对象保存的数据存储在session对象中，该数据随着session对象生命周期的结束而销毁。使用sessionStrorage保存数据，需要调用该对象的setItem()方法，应用格式如下sessionStorage.setItem(key,value)参数key为保存数据的名称，参数value为保存数据的值。使用sessionStorage读取数据，需要调用该对象的getItem()方法，应用格式如下sessionStorage.get

4、Item(key)参数key为保存数据的名称，返回值为对应指定名称的数据值。（2）localStorage，用于保存本地数据，可长久保存直至用户手动清除。使用localStorage保存数据和读取数据的方法与sessionStorage对象相同，保存数据需要调用setItem()方法，读取数据需要调用getItem()方法。此外，localStorage对象还提供了一个清除保存数据信息的方法removeItem()，该方法的应用格式如下localSotrage.removeItem(key)其中参数key为要清除的数据信息名称。7.3localStorage的多

5、数据操作1.读取多条数据信息要想读取localStorage中存储的多条数据信息，需要借助循环语句以及localStorage对象的key和length属性。其中key属性的作用是可以通过指定索引编号获取对应的存储数据，，length属性的作用是获取localstorage对象存储数据数量。应用实例如下for(vari=0;i

6、.....}2.删除多条数据信息除了可以循环遍历localStorage对象逐一调用removeItem方法清除多条数据信息外，还可以调用clear()方法一次性清除所有数据信息。应用实例如下functionremoveAll(){localStorage.clear();}7.3WebSQL数据库1.创建数据库要想使用WebSQL存储数据，必须创建一个WebSQL数据库或打开一个现有的WebSQL数据库。创建或打开数据库需调用方法openDatabase()，该方法的应用格式如下openDatabase(daName,dbVersion,dbDescribe,

7、dbSize[,callback()]);参数说明如下（1）dbName：指定数据库的名称（2）dbVersion：指定数据库的版本号（3）dbDescribe：指定数据库的描述说明（4）dbSize：指定数据库的大小，单位为字节（5）callback()：可选参数，当设定此参数时，可指定成功创建或打开数据库后执行的回调函数2.执行数据库操作流程在WebSQL数据库中的操作，都是按照如下步骤执行的：（1）打开数据库（如果没有指定数据库则需创建数据库）（2）开启一个事务（3）执行相应的SQL语句3.执行SQL语句在WebSQL中执行SQL语句，需要调用事务对象的e

8、xecuteSql()方