舉例說明如何使用WebSQL？

王铁柱6發表於2024-11-27
WebSQL

Web SQL 已被棄用，不建議在新專案中使用。現代瀏覽器大多已移除或計劃移除對它的支援，應該使用 IndexedDB 來替代它。

儘管如此，如果你需要理解 Web SQL 的用法，以下是一個簡單的例子，演示如何建立一個資料庫，一個表，並插入和查詢資料：

<!DOCTYPE html>
<html>
<head>
<title>Web SQL Example</title>
</head>
<body>

<script>
  var db = openDatabase('mydb', '1.0', 'My database', 2 * 1024 * 1024); // 2MB

  db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "Hello")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "World")');

    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>Found rows: " + len + "</p>";
      document.querySelector('body').innerHTML +=  msg;

      for (i = 0; i < len; i++) {
        msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
        document.querySelector('body').innerHTML += msg;
      }
    }, null); // null handler for errors.
  });

</script>

</body>
</html>

程式碼解釋:

  1. openDatabase('mydb', '1.0', 'My database', 2 * 1024 * 1024): 開啟或建立一個名為 "mydb" 的資料庫。版本為 '1.0'，描述為 'My database'，大小為 2MB。

  2. db.transaction(function (tx) { ... });: 開始一個事務。所有資料庫操作都應該在事務中進行。

  3. tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');: 建立一個名為 "LOGS" 的表，如果它不存在的話。包含 id (唯一) 和 log 兩列。

  4. tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "Hello")');: 插入資料到 "LOGS" 表。

  5. tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { ... }, null);: 從 "LOGS" 表中選擇所有資料。

    • []: 用於SQL語句的引數，這裡不需要引數，所以是空陣列。
    • 回撥函式 function (tx, results) { ... }: 查詢成功後執行的函式。results 物件包含查詢結果。
    • null: 錯誤處理函式，這裡設定為 null，表示忽略錯誤。

  6. results.rows.length: 獲取結果的行數。

  7. results.rows.item(i): 獲取第 i 行的資料。

再次強調，Web SQL 已被棄用。 這個例子僅用於演示其基本用法，不建議在實際專案中使用。 請考慮使用 IndexedDB，它是一個更現代、更強大的客戶端儲存解決方案。

希望這個例子能幫助你理解 Web SQL 的基本用法。 如果你有任何其他問題，請隨時提出。

相關文章