移动WEB开发之数据存储

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

2、客户端存储用户的设置偏好、本地化的数据、离线的数据，这对提高访问效率很有帮助。提供了使用JavaScript编程的接口，这样开发者可以使用JavaScript在客户端完成很多以前要在服务端才能完成的工作。Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似cookie，但实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。Web Storage又分为两种：sessionStoragelocalStorage从字面意思就可以很清楚的看出来，sessionStorage将数据保

3、存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地，除非主动删除数据，否则数据是永远不会过期的；不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法（以localStorage为例）：localStorage.setItem( key, value );localStorage.getItem( key );localStorage.removeItem( key );localStorage.clear( );localStorage.key( index );在下面的代码中，演示了创建并访

4、问一个sessionStorage的过程。sessionStorage.lastname=Smith;document.write(sessionStorage.lastname);在HTML5中推出了Web SQL数据库（Web SQL DataBase简称为WebDB）存储方式，它内置了SQLite数据库，对数据库的操作可以通过调用executeSql()方法实现，允许使用JavaScript代码控制数据库的操作。在HTML5标记语言中，WebDB可以实现数据的本地存储，它提供了关系数据库的基本功能，可以存储页面中交互的、复杂的数据。WebDB既可以保存数据，也可以缓存从服务器获取的数据。

5、WebDB通过事务驱动实现对数据的管理，因此可以支持多浏览器的并发操作，而不发生存储时的冲突。如果要通过WebDB进行本地数据的存储，首先需要打开或创建一个数据库，打开或创建数据库的API是openDatabase，其调用代码如下所示。openDatabase (DBName,DBVersion,DBDescribe,DBSize, Callback();参数参数DBName：表示数据库名称。参数参数DBVersion：表示版本号。参数参数DBDescribe：表示对数据库的描述。参数参数DBSize：表示数据库的大小，单位为字节，如果是2MB，必须写成2*1 024*1 024。参数参数Ca

6、llback()：表示创建或打开数据库成功后执行的一个回调函数。当调用openDatabase方法时，如果指定的数据库名存在，则打开该数据库。如果指定的数据库名不存在，则新创建一个指定名称的空数据库。本实例的功能是统计访问页面的次数，每当刷新一次页面，访问次数就会增加1次。本例使用localStorage方式存储数据，当关闭浏览器重新打开时，访问次数将在关闭前的数量上加1。实例文件8-1.html的主要代码如下：if (localStorage.pagecount) localStorage.pagecount=Number(localStorage.pagecount) +1; else l

7、ocalStorage.pagecount=1; document.write(Visits: + localStorage.pagecount + time(s).); 刷新页面会看到计数器在增长。请关闭浏览器窗口，然后再试一次，计数器会继续计数。执行效果如下图所示。 执行效果 本实例的功能是统计访问当前页面的次数，每当刷新一次页面，访问次数就会增加1次。本例使用sessionStorage方式存储数据，当关闭浏览器重新打开时，访问次数将重新计数。实例文件8-2.html的主要代码如下：if (sessionStorage.pagecount) sessionStorage.pagecoun

8、t=Number(sessionStorage.pagecount) +1; else sessionStorage.pagecount=1; document.write(Visits + sessionStorage.pagecount + time(s) this session.); 刷新页面会看到计数器在增长。请关闭浏览器窗口，然后再试一次，计数器已经重置了。执行效果如下图所示。 执行效果 实例文件8-3.html的具体实现代码如下所示。打开/创建数据库 编写脚本文件js3.js，具体实现流程如下所示。（1）首先定义了一个全局性变量“db”来保存打开的数据库对象。（2）当用户单击“创

9、建数据库”按钮时，调用自定义函数btnCreateDb_Click()，通过此函数“创建/打开”一个名为“Student”的数据库对象，此数据对象的版本号为“1.0”，大小为2MB。如果创建成功则执行回调函数，并在回调函数中显示执行成功的提示信息。（3）当单击“测试连接”按钮时，调用另外一个自定义的函数btnTestConn_Click()，通过此函数根据全局变量“db”的状态，显示与数据库的连接是否正常的提示信息。 文件js3.js的具体实现代码如下：/ JavaScript Documentfunction $(id) return document.getElementById(id);

10、var db;/单击“创建数据库”按钮时调用function btnCreateDb_Click() db = openDatabase(Student3, 1.0, StuManage, 2 * 1024 * 1024, function() $(pStatus).style.display = block; $(pStatus).innerHTML= 数据库创建成功!; ); /点击“测试连接”按钮时调用function btnTestConn_Click() if (db) $(pStatus).style.display = block; $(pStatus).innerHTML= 数

11、据库连接成功!; 具体实现流程如下：（1）在页面中创建一个用于输入学生资料信息的页面，用户可以在页面中输入姓名、性别、总分。（2）单击“提交”按钮后，将提交的数据信息通过调用executeSql()方法插入到表StuInfo中，并将执行结果返回显示在页面中。实例文件8-4.html的具体代码如下所示： 添加新生资料 学号： 姓名： 性别： 男 女 总分： 脚本文件中程序的具体实现流程如下：（1）在事务处理过程中调用executeSql()方法执行编写好的SQL语句。（2）在执行时获取在页面中输入的各项信息值作为实参，传递给SQL语句中的形参，从而将页面中输入的数据插入到表“StuInfo”中。

12、脚本文件js4.js的具体代码如下所示。function $(id) return document.getElementById(id);var db;/单击“提交”按钮时调用 function btnAdd_Click() /创建/打开数据库 db = openDatabase(Student, 1.0, StuManage, 2 * 1024 * 1024); if (db) var strSQL = insert into StuInfo values; strSQL += (?,?,?,?); db.transaction(function(tx) tx.executeSql(str

13、SQL, $(txtStuID).value,$(txtName).value, $(selSex).value,$(txtScore).value, function()$(txtName).value=; $(txtScore).value=; Status_Handle(成功增加1条记录!), function(tx,ex)Status_Handle(ex.message) ) /自定义显示执行过程中状态的函数function Status_Handle(message) $(pStatus).style.display = block; $(pStatus).innerHTML= me

14、ssage; /生成指定长度的随机数function RetRndNum(n) var strRnd = ; for (var intI = 0; intI n; intI+) strRnd += Math.floor(Math.random() * 10); return strRnd;/初始化数据function Init_Data() $(txtStuID).value=RetRndNum(6); 在上述中，加载页面时先调用一个自定义的函数Init_Data()。该函数可以随机生成一个6位数的字符，并将该值赋于页面中的“学号”文本框。为了使该学号不能修改，特意将此文本框的属性设置为“只读

15、”。当完成输入学生信息的其他资料，单击“提交”按钮调用自定义的函数btnAddC1ick()，此函数先打开数据库。当成功执行SQL语句后，会清空页面中原有的内容值，并显示“成功增加1条记录!”的提示。如果SQL语句执行出错，将在页面中显示错误对象ex返回的信息提示。同样，此程序也需要在SQLite环境中进行测试，在PC浏览器中的页面效果如下图所示。执行效果 在HTML5开发应用中，为了查看localStorage对象保存的全部数据信息，通常要遍历这些数据。在遍历过程中，需要访问IocalStorage对象中如下所示的两个属性：length：表示localStorage对象中保存数据的总量；ke

16、y：表示保存数据时的键名项。该属性常与索引号（index）配合使用，表示第几条键名对应的数据记录。其中，索引号（index）以0值开始。假设取第3条键名对应的数据，则index值应该为2。在接下来的内容中，将通过一个演示实例来讲解通过遍历的方式在网页中获取并显示数据的方法。具体实现流程如下：（1）在网页中设置一个文本框。（2）当在文本框中输入内容并单击“发表”按钮后，可以通过localStorage对象保存输入的数据，并在页面中实时显示这些数据。 实例文件8-5.html的具体实现代码如下所示。 正在读取数据中，请稍等片刻. 脚本文件中程序的具体实现流程如下：（1）设置在加载页面时会调用自定义

17、的函数getlocalData()，此函数具体实现流程为：根据localStorage对象的length值，使用for语句遍历localStorage对象保存的全部数据。在遍历过程中，通过strKey变量保存每次遍历的键名。在获取键名后，为了只获取localStorage对象中保存的点评数据，检测键名前3个字符是否为cnt，如果是，则通过getItem()方法获取键名对应的键值，并保存在strVal变量中。因为键值是由“，”组成的字符串，所以先通过数组strArr保存分割后的各项数值，然后通过数组下标将各项获取的内容显示在页面中。 （2）如果在页面中输入点评内容，单击“发表”按钮后会调用自定义

18、的函数btnAdd_Click()，此函数的实现流程为：先获取点评内容，然后将内容存储在strContent变量中。为了使保存内容的键名不重复，并且具有标记性，在生成键名时调用函数RetRndNum()，随机生成一个4位数字，并与字符cnt组合成新的字符串，保存在strKey变量中。为了保存更多的数据信息，保存点评内容的strContent变量通过“，”与时间数据组合成新的字符串，保存在strVal变量中。最后，通过setItem()方法将strKey变量与strVal变量分别作为键名与键值保存在localStorage对象中。 脚本文件js5.js的具体代码如下所示。/ JavaScript

19、 Documentfunction $(id) return document.getElementById(id);function btnAdd_Click() /点击发表按钮时调用 var strContent = $(txtContent).value; /获取文本框中的内容 var strTime = new Date();/定义一个日期型对象 if (strContent.length 0) /如果不为空，则保存 var strKey = cnt + RetRndNum(4); var strVal = strContent + , + strTime.toLocaleTimeString(); localStorage.setItem(strKey, strVal); getlocalData();/重新加载 $(txtContent).value=;/清空原先内容function getlocalData() /获取保存数据并显示在页面中 var strHTML= ; /标题部分