移动WEB开发之数据存储讲述.pptxVIP

目录 Web存储概述 Web Storage存储方式 实例8-3：打开、创建数据库 WebDB存储方式 实例8-1：统计访问页面的次数 实例8-2：网页计数器 实例8-4：调用并执行SQL语句 实例8-5：在网页中获取并显示数据 综合实例：保存并读取登录用户名和密码 1 Web存储概述 全新的HTML5标记语言Web存储机制应用中，我们可以将数据存放在客户端，而无需使用专业的数据库工具，主要在以下三个方面作了加强： 对于Web开发者来说，提供了容易使用的API接口，通过设置键值对即可使用。 在存储的容量方面，根据用户分配的磁盘配额进行存储，可以在每个用户域下存储不少于5～10MB的内容。这就意味者，用户可以不仅仅存储Session了，还可以在客户端存储用户的设置偏好、本地化的数据、离线的数据，这对提高访问效率很有帮助。 提供了使用JavaScript编程的接口，这样开发者可以使用JavaScript在客户端完成很多以前要在服务端才能完成的工作。 2 Web Storage存储方式 Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似cookie，但实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。Web Storage又分为两种： sessionStorage localStorage 从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地，除非主动删除数据，否则数据是永远不会过期的；不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法（以localStorage为例）： 保存数据 localStorage.setItem( key, value ); 2 Web Storage存储方式 读取数据 localStorage.getItem( key ); 删除单个数据 localStorage.removeItem( key ); 删除所有数据 localStorage.clear( ); 得到某个索引的key localStorage.key( index ); 2 Web Storage存储方式 在下面的代码中，演示了创建并访问一个sessionStorage的过程。 !DOCTYPE HTML html body script type=text/JavaScript sessionStorage.lastname=Smith; document.write(sessionStorage.lastname); /script /body /html 3 WebDB存储方式 在HTML5中推出了Web SQL数据库（Web SQL DataBase简称为WebDB）存储方式，它内置了SQLite数据库，对数据库的操作可以通过调用executeSql()方法实现，允许使用JavaScript代码控制数据库的操作。 在HTML5标记语言中，WebDB可以实现数据的本地存储，它提供了关系数据库的基本功能，可以存储页面中交互的、复杂的数据。WebDB既可以保存数据，也可以缓存从服务器获取的数据。WebDB通过事务驱动实现对数据的管理，因此可以支持多浏览器的并发操作，而不发生存储时的冲突。 如果要通过WebDB进行本地数据的存储，首先需要打开或创建一个数据库，打开或创建数据库的API是openDatabase，其调用代码如下所示。 openDatabase (DBName,DBVersion,DBDescribe,DBSize, Callback()); 3 WebDB存储方式 参数DBName：表示数据库名称。 参数DBVersion：表示版本号。 参数DBDescribe：表示对数据库的描述。 参数DBSize：表示数据库的大小，单位为字节，如果是2MB，必须写成2*1 024*1 024。 参数Callback()：表示创建或打开数据库成功后执行的一个回调函数。 当调用openDatabase方法时，如果指定的数据库名存在，则打开该数据库。如果指定的数据库名不存在，则新创建一个指定名称的空数据库。 4 实例8-1统计访问页面的次数 本实例的功能是统计访问页面的次数，每当刷新一次页面，访问次数就会增加1次。本例使用localStorage方式存储数据，当关闭浏览器重新打开时，访问次数将在关闭前的数量上加1。实例文件8-1.html的主要代码如下： !DOCTYPE