移动WEB开发之数据存储

Web存储概述WebStorage存储方式实例8-3：打开、创建数据库WebDB存储方式实例8-1：统计访问页面的次数实例8-2：网页计数器实例8-4：调用并执行SQL语句实例8-5：在网页中获取并显示数据综合实例：保存并读取登录用户名和密码全新的HTML5标记语言Web存储机制应用中，我们可以将数据存放在客户端，而无需使用专业的数据库工具，主要在以下三个方面作了加强：对于Web开发者来说，提供了容易使用的API接口，通过设置键值对即可使用。在存储的容量方面，根据用户分配的磁盘配额进行存储，可以在每个用户域下存储不少于5～10MB的内容。这就意味者，用户可以不仅仅存储Session了，还可以在客户端存储用户的设置偏好、本地化的数据、离线的数据，这对提高访问效率很有帮助。提供了使用JavaScript编程的接口，这样开发者可以使用JavaScript在客户端完成很多以前要在服务端才能完成的工作。WebStorage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似cookie，但实现功能要比cookie强大的多，cookie大小被限制在4KB，WebStorage官方建议为每个网站5MB。WebStorage又分为两种：sessionStoragelocalStorage从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地，除非主动删除数据，否则数据是永远不会过期的；不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法（以localStorage为例）：localStorage.setItem(key,value);localStorage.getItem(key);localStorage.removeItem(key);localStorage.clear();localStorage.key(index);在下面的代码中，演示了创建并访问一个sessionStorage的过程。!DOCTYPEHTMLhtmlbodyscripttype=text/JavaScriptsessionStorage.lastname=Smith;document.write(sessionStorage.lastname);/script/body/html在HTML5中推出了WebSQL数据库（WebSQLDataBase简称为WebDB）存储方式，它内置了SQLite数据库，对数据库的操作可以通过调用executeSql()方法实现，允许使用JavaScript代码控制数据库的操作。在HTML5标记语言中，WebDB可以实现数据的本地存储，它提供了关系数据库的基本功能，可以存储页面中交互的、复杂的数据。WebDB既可以保存数据，也可以缓存从服务器获取的数据。WebDB通过事务驱动实现对数据的管理，因此可以支持多浏览器的并发操作，而不发生存储时的冲突。如果要通过WebDB进行本地数据的存储，首先需要打开或创建一个数据库，打开或创建数据库的API是openDatabase，其调用代码如下所示。openDatabase(DBName,DBVersion,DBDescribe,DBSize,Callback());参数DBName：表示数据库名称。参数DBVersion：表示版本号。参数DBDescribe：表示对数据库的描述。参数DBSize：表示数据库的大小，单位为字节，如果是2MB，必须写成2*1024*1024。参数Callback()：表示创建或打开数据库成功后执行的一个回调函数。当调用openDatabase方法时，如果指定的数据库名存在，则打开该数据库。如果指定的数据库名不存在，则新创建一个指定名称的空数据库。本实例的功能是统计访问页面的次数，每当刷新一次页面，访问次数就会增加1次。本例使用localStorage方式存储数据，当关闭浏览器重新打开时，访问次数将在关闭前的数量上加1。实例文件8-1.html的主要代码如下：!DOCTYPEHTMLhtmlbodyscripttype=text/JavaScriptif(localStorage.pagecount){localStorage.pagecount=Number(localStorage.pagecount)+1;}else{localStorage.pagecount=1;}document.write(Visits:+localStorage.pagecount+time(s).);/scriptp刷新页面会看到计数器在增长。/pp请关闭浏览器窗口，然后再试一次，计数器会继续计数。/p/body/html执行效果如下图所示。执行效果本实例的功能是统计访问当前页面的次数，每当刷新一次页面，访问次数就会增加1次。本例使用sessionStorage方式存储数据，当关闭浏览器重新打开时，访问次数将重新计数。实例文件8-2.html的主要代码如下：!DOCTYPEHTMLhtmlbodyscripttype=text/JavaScriptif(sessionStorage.pagecount){sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;}else{sessionStorage.pagecount=1;}document.write(Visits+sessionStorage.pagecount+time(s)thissession.);/scriptp刷新页面会看到计数器在增长。/pp请关闭浏览器窗口，然后再试一次，计数器已经重置了。/p/body/html执行效果如下图所示。执行效果实例文件8-3.html的具体实现代码如下所示。!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title打开/创建数据库/titlelinkhref=Css/css8.cssrel=stylesheettype=text/cssscripttype=text/JavaScriptlanguage=jscriptsrc=Js/js3.js//script/headbodyinputid=btnCreateDbtype=buttonvalue=创建新的数据库class=inputbtnonClick=btnCreateDb_Click();inputid=btnTestConntype=buttonvalue=查看连接状况class=inputbtnonClick=btnTestConn_Click();pid=pStatus/p/body/html编写脚本文件js3.js，具体实现流程如下所示。（1）首先定义了一个全局性变量“db”来保存打开的数据库对象。（2）当用户单击“创建数据库”按钮时，调用自定义函数btnCreateDb_Click()，通过此函数“创建/打开”一个名为“Student”的数据库对象，此数据对象的版本号为“1.0”，大小为2MB。如果创建成功则执行回调函数，并在回调函数中显示执行成功的提示信息。（3）当单击“测试连接”按钮时，调用另外一个自定义的函数btnTestConn_Click()，通过此函数根据全局变量“db”的状态，显示与数据库的连接是否正常的提示信息。文件js3.js的具体实现代码如下：//JavaScriptDocumentfunction$$(id){returndocument.getElementById(id);}vardb;//单击“创建数据库”按钮时调用functionbtnCreateDb_Click(){db=openDatabase('Student3','1.0','StuManage',2*1024*1024,function(){$$(pStatus).style.display=block;$$(pStatus).innerHTML=数据库创建成功!;});}//点击“测试连接”按钮时调用functionbtnTestConn_Click(){if(db){$$(pStatus).style.display=block;$$(pStatus).innerHTML=数据库连接成功!;}}具体实现流程如下：（1）在页面中创建一个用于输入学生资料信息的页面，用户可以在页面中输入姓名、性别、总分。（2）单击“提交”按钮后，将提交的数据信息通过调用executeSql()方法插入到表StuInfo中，并将执行结果返回显示在页面中。实例文件8-4.html的具体代码如下所示：scripttype=text/JavaScriptlanguage=jscriptsrc=js4.js//script/headbodyonLoad=Init_Data();pid=pStatus/pfieldsetlegend添加新生资料/legendspanclass=spanl学号：inputtype=textreadonlyid=txtStuIDclass=inputtxtsize=10br姓名：inputtype=textid=txtNameclass=inputtxtsize=15/spanspanclass=spanr性别：selectid=selSexoptionvalue=男男/optionoptionvalue=女女/option/selectbr总分：inputtype=textid=txtScoreclass=inputtxtsize=8/spanpclass=btninputid=btnAddtype=buttonvalue=提交class=inputbtnonClick=btnAdd_Click();/p/fieldset/body脚本文件中程序的具体实现流程如下：（1）在事务处理过程中调用executeSql()方法执行编写好的SQL语句。（2）在执行时获取在页面中输入的各项信息值作为实参，传递给SQL语句中的形参，从而将页面中输入的数据插入到表“StuInfo”中。脚本文件js4.js的具体代码如下所示。function$$(id){returndocument.getElementById(id);}vardb;//单击“提交”按钮时调用functionbtnAdd_Click(){//创建/打开数据库db=openDatabase('Student','1.0','StuManage',2*1024*1024);if(db){varstrSQL=insertintoStuInfovalues;strSQL+=(?,?,?,?);db.transaction(function(tx){tx.executeSql(strSQL,[$$(txtStuID).value,$$(txtName).value,$$(selSex).value,$$(txtScore).value],function(){$$(txtName).value=;$$(txtScore).value=;Status_Handle(成功增加1条记录!)},function(tx,ex){Status_Handle(ex.message)})})}}//自定义显示执行过程中状态的函数functionStatus_Handle(message){$$(pStatus).style.display=block;$$(pStatus).innerHTML=me