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

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