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

《移动WEB开发之数据存储.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、目录Web存储概述WebStorage存储方式实例8-3：打开、创建数据库WebDB存储方式实例8-1：统计访问页面的次数实例8-2：网页计数器实例8-4：调用并执行SQL语句实例8-5：在网页中获取并显示数据综合实例：保存并读取登录用户名和密码1Web存储概述全新的HTML5标记语言Web存储机制应用中，我们可以将数据存放在客户端，而无需使用专业的数据库工具，主要在以下三个方面作了加强：对于Web开发者来说，提供了容易使用的API接口，通过设置键值对即可使用。在存储的容量方面，根据用户分配的磁盘配额进行存储，可以在每个用户域下存储不少于5

2、～10MB的内容。这就意味者，用户可以不仅仅存储Session了，还可以在客户端存储用户的设置偏好、本地化的数据、离线的数据，这对提高访问效率很有帮助。提供了使用JavaScript编程的接口，这样开发者可以使用JavaScript在客户端完成很多以前要在服务端才能完成的工作。2WebStorage存储方式WebStorage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似cookie，但实现功能要比cookie强大的多，cookie大小被限制在4KB，WebStorage官方建议为

3、每个网站5MB。WebStorage又分为两种：sessionStoragelocalStorage从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地，除非主动删除数据，否则数据是永远不会过期的；不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法（以localStorage为例）：保存数据localStorage.setItem(key,value);2WebSt

4、orage存储方式读取数据localStorage.getItem(key);删除单个数据localStorage.removeItem(key);删除所有数据localStorage.clear();得到某个索引的keylocalStorage.key(index);2WebStorage存储方式在下面的代码中，演示了创建并访问一个sessionStorage的过程。sessionStorage.last

5、name="Smith";document.write(sessionStorage.lastname);3WebDB存储方式在HTML5中推出了WebSQL数据库（WebSQLDataBase简称为WebDB）存储方式，它内置了SQLite数据库，对数据库的操作可以通过调用executeSql()方法实现，允许使用JavaScript代码控制数据库的操作。在HTML5标记语言中，WebDB可以实现数据的本地存储，它提供了关系数据库的基本功能，可以存储页面中交互的、复杂的数据。WebDB既可以

6、保存数据，也可以缓存从服务器获取的数据。WebDB通过事务驱动实现对数据的管理，因此可以支持多浏览器的并发操作，而不发生存储时的冲突。如果要通过WebDB进行本地数据的存储，首先需要打开或创建一个数据库，打开或创建数据库的API是openDatabase，其调用代码如下所示。openDatabase(DBName,DBVersion,DBDescribe,DBSize,Callback());3WebDB存储方式参数DBName：表示数据库名称。参数DBVersion：表示版本号。参数DBDescribe：表示对数据库的描述。参数DBSi

7、ze：表示数据库的大小，单位为字节，如果是2MB，必须写成2*1024*1024。参数Callback()：表示创建或打开数据库成功后执行的一个回调函数。当调用openDatabase方法时，如果指定的数据库名存在，则打开该数据库。如果指定的数据库名不存在，则新创建一个指定名称的空数据库。4实例8-1统计访问页面的次数本实例的功能是统计访问页面的次数，每当刷新一次页面，访问次数就会增加1次。本例使用localStorage方式存储数据，当关闭浏览器重新打开时，访问次数将在关闭前的数量上加1。实例文件8-1.html的主要代码如下：

8、TYPEHTML>if(localStorage.pagecount){localStorag