Web SQL là một phần của HTML5 cho phép các ứng dụng web sử dụng cơ sở dữ liệu SQL trong trình duyệt. Dưới đây là hướng dẫn chi tiết về Web SQL:

Web SQL trong HTML5

1. Khái niệm cơ bản

Web SQL cho phép bạn tạo và quản lý cơ sở dữ liệu SQL trong trình duyệt. Đoạn mã dưới đây mở hoặc tạo một cơ sở dữ liệu mới.

let db = openDatabase('TenCSDL', '1.0', 'MoTa', 2 * 1024 * 1024);

2. Tạo bảng

Để lưu trữ dữ liệu, bạn cần tạo bảng trong cơ sở dữ liệu. Đoạn mã sau tạo bảng “Users” nếu nó chưa tồn tại.

db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS Users (id, name, email)');
});

3. Chèn dữ liệu

Đoạn mã này cho phép bạn chèn một bản ghi mới vào bảng “Users”. Bạn có thể sử dụng tham số để tránh SQL injection.

db.transaction(function(tx) {
  tx.executeSql('INSERT INTO Users (name, email) VALUES (?, ?)', 
    ['John Doe', '[email protected]'],
    function(tx, results) {
      console.log('Đã chèn thành công');
    },
    function(tx, error) {
      console.log('Lỗi: ' + error.message);
    }
  );
});

4. Truy vấn dữ liệu

db.transaction(function(tx) {
  tx.executeSql('SELECT * FROM Users', [], function(tx, results) {
    let len = results.rows.length;
    for (let i = 0; i < len; i++) {
      console.log(results.rows.item(i).name);
    }
  });
});

5. Cập nhật dữ liệu

db.transaction(function(tx) {
  tx.executeSql('UPDATE Users SET email = ? WHERE name = ?', 
    ['[email protected]', 'John Doe']
  );
});

6. Xóa dữ liệu

db.transaction(function(tx) {
  tx.executeSql('DELETE FROM Users WHERE name = ?', ['John Doe']);
});

7. Ví dụ đầy đủ

let db = openDatabase('MyDatabase', '1.0', 'Test Database', 2 * 1024 * 1024);

db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS Users (id INTEGER PRIMARY KEY, name TEXT, email TEXT)');
  
  tx.executeSql('INSERT INTO Users (name, email) VALUES (?, ?)', 
    ['John Doe', '[email protected]'],
    function(tx, results) {
      console.log('Đã chèn thành công');
    }
  );
  
  tx.executeSql('SELECT * FROM Users', [], function(tx, results) {
    let len = results.rows.length;
    for (let i = 0; i < len; i++) {
      console.log(results.rows.item(i));
    }
  });
});

8. Lưu ý quan trọng

• Web SQL đã bị không còn được hỗ trợ chính thức.
• Không được khuyến nghị sử dụng cho các dự án mới.
• Nên sử dụng IndexedDB thay thế.

9. Hạn chế

• Không được hỗ trợ đầy đủ ở tất cả các trình duyệt.
• Không còn được phát triển tiêu chuẩn.
• Hiệu năng kém so với IndexedDB.

10. Phương án thay thế

let request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  db.createObjectStore('Users', { keyPath: 'id', autoIncrement: true });
};

request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(['Users'], 'readwrite');
  let store = transaction.objectStore('Users');
  
  store.add({ name: 'John Doe', email: '[email protected]' });
};

Tóm lại

Mặc dù Web SQL cung cấp cách thức lưu trữ dữ liệu đơn giản trong trình duyệt, nhưng hiện nay không được khuyến nghị sử dụng. Các nhà phát triển nên chuyển sang IndexedDB hoặc các giải pháp lưu trữ hiện đại khác.