您的位置：360文档中心› 移动WEB开发之数据存储

移动WEB开发之数据存储

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

</span> <p class="btn"> <input id="btnAdd" type="button" value="提交" class="inputbtn" onClick="btnAdd_Click();"> </p> </fieldset> </body>
脚本文件中程序的具体实现流程如下： （1）在事务处理过程中调用executeSql()方法执行编写好的SQL语句。 （2）在执行时获取在页面中输入的各项信息值作为实参，传递给SQL语句中的形 参，从而将页面中输入的数据插入到表“StuInfo”中。 脚本文件js4.js的具体代码如下所示。 function $$(id) { return document.getElementById(id); } var db; //单击“提交”按钮时调用
在HTML5中推出了Web SQL数据库（Web SQL DataBase简称为WebDB）存储方式， 它内置了SQLite数据库，对数据库的操作可以通过调用executeSql()方法实现，允许使用 JavaScript代码控制数据库的操作。 在HTML5标记语言中，WebDB可以实现数据的本地存储，它提供了关系数据库的基 本功能，可以存储页面中交互的、复杂的数据。WebDB既可以保存数据，也可以缓存从 服务器获取的数据。WebDB通过事务驱动实现对数据的管理，因此可以支持多浏览器的 并发操作，而不发生存储时的冲突。 如果要通过WebDB进行本地数据的存储，首先需要打开或创建一个数据库，打开或创 建数据库的API是openDatabase，其调用代码如下所示。 openDatabase (DBName,DBVersion,DBDescribe,DBSize, Callback());
<legend>添加新生资料</legend> <span class="spanl"> 学号：<input type="text" readonly id="txtStuID" class="inputtxt" size="10"><br> 姓名：<input type="text" id="txtName" class="inputtxt" size="15"> </span> <span class="spanr"> 性别：<select id="selSex"> <option value="男">男</option> <option value="女">女</option> </select><br> 总分：<input type="text" id="txtScore" class="inputtxt" size="8">
document.write("Visits: " + localStorage.pagecount + " time(s)."); </script> <p>刷新页面会看到计数器在增长。</p> <p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p> </body> </html> 执行效果如下图所示。
执行效果
实例文件8-3.html的具体实现代码如下所示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>打开/创建数据库</title> <link href="Css/css8.css" rel="stylesheet" type="text/css"> <script type="text/JavaScript" language="jscript" src="Js/js3.js"/> </script> </head> <body>
参数DBName：表示数据库名称。 参数DBVersion：表示版本号。 参数DBDescribe：表示对数据库的描述。 参数DBSize：表示数据库的大小，单位为字节，如果是2MB，必须写成2*1 024*1 024。
参数Callback()：表示创建或打开数据库成功后执行的一个回调函数。
当调用openDatabase方法时，如果指定的数据库名存在，则打开该数据库。如果指定 的数据库名不存在，则新创建一个指定名称的空数据库。
document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); </script> <p>刷新页面会看到计数器在增长。</p> <p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p> </body> </html> 执行效果如下图所示。
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(strSQL,[ $$("txtStuID").value,$$("txtName").value, $$("selSex").value,$$("txtScore").value ], function(){ $$("txtName").value=""; $$("txtScore").value=""; Status_Handle("成功增加1条记录!") },
（2）单击“提交”按钮后，将提交的数据信息通过调用executeSql()方法插入到表 StuInfo中，并将执行结果返回显示在页面中。
实例文件8-4.html的具体代码如下所示： <script type="text/JavaScript" language="jscript" src="js4.js"/> </script> </head> <body onLoad="Init_Data();"> <p id="pStatus"></p> <fieldset>
本实例的功能是统计访问页面的次数，每当刷新一次页面，访问次数就会增加1次。本例 使用localStorage方式存储数据，当关闭浏览器重新打开时，访问次数将在关闭前的数量上加1。 实例文件8-1.html的主要代码如下： <!DOCTYPE HTML> <html> <body> <script type="text/JavaScript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; }
编写脚本文件js3.js，具体实现流程如下所示。 （1）首先定义了一个全局性变量“db”来保存打开的数据库对象。 （2）当用户单击“创建数据库”按钮时，调用自定义函数btnCreateDb_Click()，通 过此函数“创建/打开”一个名为“Student”的数据库对象，此数据对象的版本号 为“1.0”，大小为2MB。如果创建成功则执行回调函数，并在回调函数中显示执 行成功的提示信息。 （3）当单击“测试连接”按钮时，调用另外一个自定义的函数btnTestConn_Click()， 通过此函数根据全局变量“db”的状态，显示与数据库的连接是否正常的提示信息。
执行效果
本实例的功能是统计访问当前页面的次数，每当刷新一次页面，访问次数就会增加1次。 本例使用sessionStorage方式存储数据，当关闭浏览器重新打开时，访问次数将重新计数。实例 文件8-2.html的主要代码如下： <!DOCTYPE HTML> <html> <body> <script type="text/JavaScript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; }
文件js3.js的具体实现代码如下： // JavaScript Document function $$(id) { return document.getElementById(id); } var db; //单击“创建数据库”按钮时调用 function btnCreateDb_Click() { db = openDatabase('Student3', '1.0', 'StuManage', 2 * 1024 * 1024, function() { $$("pStatus").style.display = "block"; $$("pStatus").innerHTML= "数据库创建成功!"; }); }
localStorage.setItem( key, value );
localStorage.getItem( key );
localStorage.removeItem( key );
localStorage.clear( );
localStoragห้องสมุดไป่ตู้.key( index );
在下面的代码中，演示了创建并访问一个sessionStorage的过程。 <!DOCTYPE HTML> <html> <body> <script type="text/JavaScript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> </body> </html>
//点击“测试连接”按钮时调用 function btnTestConn_Click() { if (db) { $$("pStatus").style.display = "block"; $$("pStatus").innerHTML= "数据库连接成功!"; } }
具体实现流程如下： （1）在页面中创建一个用于输入学生资料信息的页面，用户可以在页面中输入姓 名、性别、总分。
Web存储概述
Web Storage存储方式
WebDB存储方式
实例8-1：统计访问页面的次数
实例8-2：网页计数器 实例8-3：打开、创建数据库 实例8-4：调用并执行SQL语句 实例8-5：在网页中获取并显示数据 综合实例：保存并读取登录用户名和密码
全新的HTML5标记语言Web存储机制应用中，我们可以将数据存放在客户端，而无需 使用专业的数据库工具，主要在以下三个方面作了加强： 对于Web开发者来说，提供了容易使用的API接口，通过设置键值对即可使用。 在存储的容量方面，根据用户分配的磁盘配额进行存储，可以在每个用户域下存储不少 于5～10MB的内容。这就意味者，用户可以不仅仅存储Session了，还可以在客户端存储 用户的设置偏好、本地化的数据、离线的数据，这对提高访问效率很有帮助。 提供了使用JavaScript编程的接口，这样开发者可以使用JavaScript在客户端完成很多以前 要在服务端才能完成的工作。
Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客 户端本地存储数据，类似cookie，但实现功能要比cookie强大的多，cookie大小被限制在 4KB，Web Storage官方建议为每个网站5MB。Web Storage又分为两种： sessionStorage localStorage 从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关 闭也就没了；而localStorage则一直将数据保存在客户端本地，除非主动删除数据，否则数 据是永远不会过期的；不管是sessionStorage，还是localStorage，可使用的API都相同，常用 的有如下几个方法（以localStorage为例）：
<input id="btnCreateDb" type="button" value="创建新的数据库" class="inputbtn" onClick="btnCreateDb_Click();"> <input id="btnTestConn" type="button" value="查看连接状况" class="inputbtn" onClick="btnTestConn_Click();"> <p id="pStatus"></p> </body> </html>
相关文档
最新文档