H5开发（三）：HTML5 MathML 教程、Web 存储、Web SQL 数据库

2021-03-03 16:10:50 来源：

HTML5 MathML 教程

HTML5 的 HTML 语法允许我们在文档内使用 <math>...</math> 标签应用 MathML 元素。大多数浏览器都能显示 MathML 标签。如果你的浏览器不支持 MathML，建议你使用更新版的 FireFox。

使用 MathML 字符

想象一下，下面是一个使用字符 &InvisibleTimes; 的标记：

html
<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>MathML Examples</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
          <mrow>
             <msup>
                <mi>x</mi>
                <mn>2</mn>
             </msup>
             <mo>+</mo>
             <mrow>
                <mn>4</mn>
                <mo>?</mo>
                <mi>x</mi>
             </mrow>
             <mo>+</mo>
             <mn>4</mn>
          </mrow>
             <mo>=</mo>
             <mn>0</mn>
        </mrow>
   </math>
</body>
</html>

这会生成如下结果。如果你不能看到 x2 + 4x + 4 = 0 这样正确的结果，请使用 FireFox 3.5 或更高的版本。

x 2 + 4  x + 4 = 0

便于学习这一概念 - 请使用 FireFox 3.7 或更高版本进行<a rel="nofollow" href="http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-20.htm" "="" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration: none;">在线练习。

矩阵表达示例

想象一下下面的例子，它会被用来表示一个简单的 2x2 矩阵：

html
<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>MathML Examples</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
          <mi>A</mi>
          <mo>=</mo>
          <mfenced open="[" close="]">
             <mtable>
                <mtr>
                   <mtd><mi>x</mi></mtd>
                   <mtd><mi>y</mi></mtd>
                </mtr>
                <mtr>
                   <mtd><mi>z</mi></mtd>
                   <mtd><mi>w</mi></mtd>
                </mtr>
             </mtable>
         </mfenced>
      </mrow>
   </math>
</body>
</html>

这会生成如下结果。如果不能看到正确的结果，请使用 FireFox 3.7 或更高的版本。

2x2 matrix

HTML5 Web 存储

HTML5 引入了两种机制，类似于 HTTP 的会话 cookies，用于在客户端存储结构化数据以及克服以下缺点。

  • 每个 HTTP 请求中都包含 Cookies，从而导致传输相同的数据减缓我们的 Web 应用程序。

  • 每个 HTTP 请求中都包含 Cookies，从而导致发送未加密的数据到互联网上。

  • Cookies 只能存储有限的 4KB 数据，不足以存储所需的数据。

这两种存储方式是 session storage 和 local storage，它们将用于处理不同的情况。

几乎所有更新版的浏览器都支持 HTML5 存储，包括 IE 浏览器。

会话存储

_会话存储_被设计用于用户执行单一事务的场景，但是同时可以在不同的窗口中执行多个事务。

示例

比如，如果用户在同一网站的两个不同的窗口中购买机票。如果该网站使用 cookie 跟踪用户购买的机票，当用户在窗口中点击页面时，从一个窗口到另一个时当前已经购买的机票会“泄漏”，这可能导致用户购买同一航班的两张机票而没有注意到。

HTML5 引入了 sessionStorage 属性，这个网站可以用来把数据添加到会话存储中，用户仍然可以在打开的持有该会话的窗口中访问同一站点的任意页面，当关闭窗口时，会话也会丢失。

下面的代码将会设置一个会话变量，然后访问该变量：

<!DOCTYPE HTML>
<html>
<body>

  <script type="text/javascript">
    if( sessionStorage.hits ){
       sessionStorage.hits = Number(sessionStorage.hits) +1;
    }else{
       sessionStorage.hits = 1;
    }
    document.write("Total Hits :" + sessionStorage.hits );
  </script>
  <p>Refresh the page to increase number of hits.</p>
  <p>Close the window and open it again and check the result.</p>

</body>
</html>

删除 Web 存储

在本地机器上存储敏感数据可能是危险的，可能会留下安全隐患。

_会话存储数据_在会话终止之后将由浏览器立即删除。

要清除本地存储设置需要调用 localStorage.remove('key')；这个 'key' 就是我们想要移除的值对应的键。如果想要清除所有设置，需要调用 localStorage.clear() 方法。

下面的代码会完全清除本地存储：

<!DOCTYPE HTML>
<html>
<body>

  <script type="text/javascript">
    localStorage.clear();

    // Reset number of hits.
    if( localStorage.hits ){
       localStorage.hits = Number(localStorage.hits) +1;
    }else{
       localStorage.hits = 1;
    }
    document.write("Total Hits :" + localStorage.hits );
  </script>
  <p>Refreshing the page would not to increase hit counter.</p>
  <p>Close the window and open it again and check the result.</p>

</body>
</html>

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

假定你是一个优秀的 Web 开发人员，如果是这样的话，毫无疑问你会很清楚 SQL 和 RDBMS 的概念。

我们可以在更新版的 Safari，Chrome 和 Opera 中使用 Web SQL 数据库。

核心方法

下面是规范中定义的三个核心方法。也会涵盖在本教程中：

  1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

  2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

  3. executeSql：这个方法用于执行实际的 SQL 查询。

开启数据库

如果数据库已经存在，openDatabase 方法负责开启数据库，如果不存在，这个方法会创建它。

使用下面的代码可以创建并开启一个数据库：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

上面的方法接受下列五个参数：

  1. 数据库名称

  2. 版本号

  3. 描述文本

  4. 数据库大小

  5. 创建回调

更后也是第五个参数，创建回调会在创建数据库后被调用。然而，即使没有这个特性(功能)，运行时仍然会创建数据库以及正确的版本。

执行查询

执行查询需要使用 database.transaction() 函数。这个函数需要一个参数，它是一个负责实际执行查询的函数，如下所示：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

上面的查询语句会在 'mydb' 数据库中创建一个叫做的 LOGS 的表。

插入操作

为了在表中创建条目，我们在上面的例子中加入简单的 SQL 查询，如下所示：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});

创建条目时还可以传递如下所示的动态值：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS 
                        (id,log) VALUES (?, ?'), [e_id, e_log];
});

这里的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。

读取操作

要读取已经存在的记录，我们可以使用回调来捕获结果，如下所示：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p>Found rows: " + len + "</p>";
   document.querySelector('#status').innerHTML +=  msg;
   for (i = 0; i < len; i++){
      alert(results.rows.item(i).log );
   }
 }, null);
});

更终示例

更后，然我们把这个例子放到如下所示的完整 HTML5 文档中，然后尝试在 Safari 浏览器中运行它：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
  msg = '<p>Log message created and row inserted.</p>';
  document.querySelector('#status').innerHTML =  msg;
});

db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p>Found rows: " + len + "</p>";
   document.querySelector('#status').innerHTML +=  msg;
   for (i = 0; i < len; i++){
     msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
     document.querySelector('#status').innerHTML +=  msg;
   }
 }, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>

在更新版的 Safari 或者 Opera 浏览器中这会生成如下所示结果：

Log message created and row inserted.

Found rows: 2

foobar

logmsg


上一篇：H5开发（四）：HTML5 服务器推送事件、WebSockets 教程、画布、音频和视频   下一篇：H5开发（二）：HTML5 SVG 教程、事件、表单
© 2015-2025 鄂ICP备2020015645号-1 版权所有 鄂ICP备2020015645号-1
     
扫码添加微信
多个同行案例 / 针对企业信息化诊脉 / 获取最优惠方案
专家电话：13367242828（免费获得建设方案！）