HTML Web SQL

Introduction

Web SQL Database is a deprecated web standard for storing structured data in the browser using a SQL-based relational database. Under the hood, browsers that supported it used SQLite, so familiar SQL statements—CREATE TABLE, INSERT, SELECT, UPDATE, and DELETE—work much like server-side databases.

Although Web SQL is no longer recommended for new projects, understanding how it works is valuable for maintaining legacy applications and learning how client-side storage evolved. This page is the overview and entry point for the Web SQL series; follow-up tutorials cover each CRUD operation in depth.

What You’ll Learn

What Is Web SQL?

Web SQL is a browser API that lets web applications store data in a relational database on the client. You interact with it using SQL—the same language used by MySQL, PostgreSQL, and SQLite—which makes it approachable if you already know databases.

The two core methods are:

• openDatabase(name, version, displayName, size) — opens an existing database or creates a new one.
• db.transaction(callback) — runs one or more tx.executeSql() calls as an atomic unit.

Data persists across page reloads (until the user clears site data), making Web SQL useful for offline-first prototypes, cached records, and small local datasets—when the browser still exposes the API.

Why Web SQL Was Deprecated

The W3C deprecated Web SQL in 2010 and stopped pursuing it as an official standard. The main reasons were:

• Single implementation — Web SQL depended on one vendor’s SQLite build, not a spec every browser could implement independently.
• Inconsistent support — Firefox never shipped it; Chrome later removed it; only some Safari versions kept it.
• Better alternative — IndexedDB provides a standardized, cross-browser key-value and object store without tying the web platform to SQL.

For new code in 2026, treat Web SQL as read-only knowledge—learn it to debug old apps, but build new storage on IndexedDB or server APIs.

Basic Concepts

Before writing queries, know these relational-database terms:

• Database — a named container for tables (opened with openDatabase).
• Table — rows and columns of related data (created with CREATE TABLE).
• SQL — Structured Query Language for defining schema and reading/writing rows.
• Transaction — a group of statements that succeed or fail together, preserving consistency.
• ResultSet — the object returned by SELECT queries; iterate with results.rows.item(i).

Creating a Database

Call openDatabase to open or create a database. The fourth argument is an estimated size in bytes (here, 2 MB). Then run CREATE TABLE inside a transaction:

const db = openDatabase('myDatabase', '1.0', 'My App DB', 2 * 1024 * 1024);

db.transaction(function (tx) {
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY, name TEXT, email TEXT)'
  );
});

CREATE TABLE IF NOT EXISTS is idempotent—safe to run on every page load without errors if the table already exists.

Executing SQL Queries

Use tx.executeSql(sql, params, successCallback, errorCallback) inside a transaction. Always bind dynamic values with ? placeholders instead of string concatenation:

db.transaction(function (tx) {
  tx.executeSql(
    'INSERT INTO contacts (id, name, email) VALUES (?, ?, ?)',
    [1, 'Jane Doe', 'jane@example.com'],
    function (tx, result) {
      console.log('Inserted row, insertId:', result.insertId);
    },
    function (tx, error) {
      console.error('Insert failed:', error.message);
      return true; /* roll back transaction */
    }
  );
});

The same pattern applies to UPDATE, DELETE, and SELECT. See the dedicated tutorials: INSERT, SELECT / Retrieve, UPDATE, and DELETE.

Transactions and Error Handling

Every Web SQL operation must run inside db.transaction(). You can pass three callbacks to transaction itself—work, error, and success:

db.transaction(
  function (tx) {
    tx.executeSql('UPDATE contacts SET name = ? WHERE id = ?', ['Jane Smith', 1]);
  },
  function (error) {
    console.error('Transaction failed:', error.message);
  },
  function () {
    console.log('Transaction committed successfully');
  }
);

Inside executeSql, return true from the error callback to roll back the transaction. Without it, the transaction may continue and leave data in an inconsistent state.

Working with Results

When you run a SELECT query, the success callback receives a ResultSet. Use results.rows.length and results.rows.item(index) to read each row:

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

For write operations, check result.rowsAffected (updates/deletes) or result.insertId (inserts) to confirm what changed.

Examples Gallery

These examples demonstrate the Web SQL lifecycle from opening a database to reading rows. Use Try It Yourself to run live demos. If your browser does not expose openDatabase, the demo shows a clear status message.

if (!window.openDatabase) {
  console.warn('Web SQL is not supported in this browser.');
} else {
  const db = openDatabase('myApp', '1.0', 'My Application', 1024 * 1024);
  console.log('Database opened:', db);
}

Database opened: [object Database]

const db = openDatabase('myApp', '1.0', 'My Application', 2 * 1024 * 1024);

db.transaction(function (tx) {
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS contacts (' +
    'id INTEGER PRIMARY KEY, name TEXT, email TEXT' +
    ')'
  );
}, function (err) {
  console.error('Setup failed:', err.message);
}, function () {
  console.log('Table ready');
});

Table ready

db.transaction(function (tx) {
  tx.executeSql(
    'INSERT INTO contacts (id, name, email) VALUES (?, ?, ?)',
    [1, 'John Doe', 'john@example.com'],
    function (tx, result) {
      console.log('insertId:', result.insertId);
    }
  );
});

insertId: 1

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

{ id: 1, name: "John Doe", email: "john@example.com" }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web SQL Example</title>
</head>
<body>
  <h1>Web SQL Address Book</h1>
  <button type="button" id="addBtn">Add Contact</button>
  <button type="button" id="listBtn">List Contacts</button>
  <p id="status"></p>
  <ul id="list"></ul>

  <script>
    if (!window.openDatabase) {
      document.getElementById('status').textContent =
        'Web SQL is not supported in this browser.';
    } else {
      const db = openDatabase('addressBook', '1.0', 'Address Book', 2 * 1024 * 1024);

      db.transaction(function (tx) {
        tx.executeSql(
          'CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY, name TEXT)'
        );
      });

      document.getElementById('addBtn').addEventListener('click', function () {
        const id = Date.now();
        db.transaction(function (tx) {
          tx.executeSql(
            'INSERT INTO contacts (id, name) VALUES (?, ?)',
            [id, 'New Contact'],
            function () {
              document.getElementById('status').textContent = 'Added id ' + id;
            }
          );
        });
      });

      document.getElementById('listBtn').addEventListener('click', function () {
        const list = document.getElementById('list');
        list.innerHTML = '';
        db.transaction(function (tx) {
          tx.executeSql('SELECT * FROM contacts', [], function (tx, results) {
            for (let i = 0; i < results.rows.length; i++) {
              const row = results.rows.item(i);
              const li = document.createElement('li');
              li.textContent = row.name + ' (id ' + row.id + ')';
              list.appendChild(li);
            }
          });
        });
      });
    }
  </script>
</body>
</html>

Status: Added id 1717584000123
List:
  • New Contact (id 1717584000123)

🚀 Common Use Cases

• Offline drafts — save form data locally when the network is unavailable.
• Cached catalogs — store product or article rows for faster repeat visits.
• Legacy mobile web apps — maintain older Safari-based apps that still call openDatabase.
• Learning SQL — experiment with relational queries without a server.
• Migration planning — understand existing Web SQL schemas before moving to IndexedDB.

💡 Best Practices

📝 Notes

• Web SQL is deprecated—prefer IndexedDB for new apps.
• All executeSql calls must run inside db.transaction().
• Version upgrades use changeVersion() (advanced; rarely needed in tutorials).
• Estimated size is a hint; browsers may enforce quotas per origin.
• Clearing browser data wipes the entire Web SQL database for that site.
• Continue to DELETE, INSERT, SELECT, and UPDATE for operation-specific guides.