HTML5 – Web SQL 數據庫

Web SQL Database 是一種基于 SQL 的數據庫，適用于 web 環境下的數據存儲。愛掏網 - it200.com它是 HTML5 提供的新特性之一，可以用來替代傳統的 cookie 和 localStorage。愛掏網 - it200.com

Web SQL Database 在瀏覽器中創建單個數據庫，該數據庫可以在頁面之間共享，可以存儲大量的數據，支持 SQL 語句進行數據的增刪改查。愛掏網 - it200.com

如何使用 Web SQL Database

Web SQL Database 的使用非常簡單，我們只需要使用 JavaScript 來操作它即可。愛掏網 - it200.com下面是一個例子，我們通過 Web SQL Database 來存儲學生的基本信息，包括姓名、年齡、性別和學號等字段：

// 打開或創建一個數據庫，名稱為 Students，版本號為 1.0，描述為 學生信息
var db = openDatabase('Students', '1.0', '學生信息', 2 * 1024 * 1024); 

// 執行 sql 語句創建一張名為 student_info 的表格，包括 id、name、age、gender 和 student_number 這五個字段
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS student_info (id INTEGER PRIMARY KEY, name, age, gender, student_number)');
});

// 插入一條學生信息
db.transaction(function (tx) {
  tx.executeSql('INSERT INTO student_info (name, age, gender, student_number) VALUES (?, ?, ?, ?)', ['Steve', 18, 'male', '19020001']);
});

// 獲取所有學生信息
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM student_info', [], function (tx, results) {
    var len = results.rows.length, i;
    console.log("學生信息條數: " + len);
    for (i = 0; i < len; i++) {
      console.log(results.rows.item(i));
    }
  }, null);
});

// 更新學生信息
db.transaction(function (tx) {
  tx.executeSql('UPDATE student_info SET age = ? WHERE name = ?', [20, 'Steve']);
});

// 刪除學生信息
db.transaction(function (tx) {
  tx.executeSql('DELETE FROM student_info WHERE name = ?', ['Steve']);
});

我們可以在控制臺中看到學生信息的輸出，如下所示：

學生信息條數: 1
Object {id: 1, name: "Steve", age: 18, gender: "male", student_number: "19020001"}

易錯點

在使用 Web SQL Database 時，需要注意以下幾個易錯點：

1. 要在同一瀏覽器的同一頁面內使用；

2. 操作數據庫時，需要在回調函數中執行 SQL 語句；

3. INSERT 和 UPDATE 語句的參數需要使用數組的方式傳遞。愛掏網 - it200.com

結論

Web SQL Database 是一種基于 SQL 的數據庫，適用于 web 環境下的數據存儲。愛掏網 - it200.com它支持 SQL 語句進行數據的增刪改查，可以存儲大量的數據。愛掏網 - it200.com在使用 Web SQL Database 時，需要注意上面提到的易錯點。愛掏網 - it200.com