HTML Web SQL

Beginner
10 min read
Updated: Nov 2026
4 CRUD tutorials
Live preview
HTML Web SQL tutorial — client-side SQLite database in the browser
Definition

Definition and Usage

Web SQL is a deprecated browser API for storing structured data in a local SQLite database. You open it with openDatabase(), then run SQL inside db.transaction() via tx.executeSql().

Use this hub to learn the core ideas, try a live demo (when the API exists), then open the focused CRUD tutorials: INSERT, SELECT, UPDATE, and DELETE.

Deprecated API.

Web SQL is obsolete and removed from modern Chrome. Firefox never shipped it. Prefer IndexedDB for new offline storage. Keep this series for legacy maintenance and SQL learning.

vs IndexedDB.

Web SQL uses SQL strings and tables. IndexedDB uses object stores and JavaScript objects. Same-origin only—one site cannot read another site’s database.

Vocabulary

Key Concepts

TermMeaning
DatabaseTop-level container opened with openDatabase(name, version, displayName, size)
TableSQL table created with CREATE TABLE (columns + types)
TransactionAtomic unit of work: db.transaction(callback)
executeSqlRuns one SQL statement with optional ? bindings
Result setSuccess callback receives (tx, result) with rows, rowsAffected, insertId
Bound paramsPass values as an array—never concatenate user input into SQL
Syntax

Syntax

syntax.js
openDatabase( name, version, displayName, estimatedSize)

Then run SQL inside db.transaction(function (tx) { tx.executeSql(...) }).

TaskPattern
Create tableCREATE TABLE IF NOT EXISTS name (...)
InsertINSERT INTO t (cols) VALUES (?, ?)
ReadSELECT cols FROM t WHERE ...
UpdateUPDATE t SET col = ? WHERE id = ?
DeleteDELETE FROM t WHERE id = ?
Flow

How It Works

A typical first Web SQL program follows these steps:

  1. Feature-detect with window.openDatabase.
  2. Open with openDatabase('myDb', '1.0', 'My DB', size).
  3. Start a transaction with db.transaction(...).
  4. Create the table with CREATE TABLE IF NOT EXISTS if needed.
  5. Run CRUD SQL with tx.executeSql(sql, args, success, error).
JS
if (!window.openDatabase) {
  console.warn('Web SQL not available');
} else {
  var db = openDatabase('myDatabase', '1.0', 'Demo', 1024 * 1024);

  db.transaction(function (tx) {
    tx.executeSql(
      'CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY, name TEXT, email TEXT)'
    );
  }, null, function () {
    console.log('Database ready');
  });
}
Learn by operation

CRUD Tutorials

Each page is lean and focused: definition, syntax, return value tables, live preview, examples with How It Works, and FAQs.

INSERT

Add rows with INSERT INTO and bound ? parameters.

SELECT

Read rows with SELECT and loop result.rows.item(i).

UPDATE

Change rows with UPDATE ... SET ... WHERE.

DELETE

Remove rows with DELETE FROM and WHERE.

Try it

Live Preview

Open a demo database, seed a contact, read it, then clear the table. Many modern browsers no longer support Web SQL—if so, the status box will say so.

Private demo database when Web SQL is available. Prefer IndexedDB for new work.

Status

Click Open DB to start.

Code

Examples

Short starter snippets. Use Try It Yourself for a live editor, then dive into the CRUD pages.

Example 1 — Open a Database and Create a Table

Feature-detect, open the DB, then create the table inside a transaction.

JS
if (!window.openDatabase) {
  console.warn('Web SQL not available');
} else {
  var db = openDatabase('demoDb', '1.0', 'Demo', 1024 * 1024);

  db.transaction(function (tx) {
    tx.executeSql(
      'CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY, name TEXT, email TEXT)'
    );
  }, null, function () {
    console.log('Ready: demoDb');
  });
}
Try It Yourself

How It Works

  1. Check openDatabase before calling it.
  2. Open with name, version, display name, and size.
  3. Create the table with IF NOT EXISTS so repeats are safe.
  4. Use the success callback when the transaction commits.

Example 2 — Insert a Row

Writes run inside db.transaction() with bound parameters.

JS
db.transaction(function (tx) {
  tx.executeSql(
    'INSERT INTO contacts (name, email) VALUES (?, ?)',
    ['Alex Rivera', '[email protected]'],
    function (tx, result) {
      console.log('Inserted id:', result.insertId);
    }
  );
});
Try It Yourself

How It Works

  1. Start a transaction on the database.
  2. Bind values with ? instead of string concatenation.
  3. Read insertId for the new primary key.
  4. See the INSERT tutorial for OR REPLACE and OR IGNORE.

Example 3 — Read Rows

Loop result.rows with item(i)—it is array-like, not a real array.

JS
db.transaction(function (tx) {
  tx.executeSql(
    'SELECT id, name FROM contacts WHERE id = ?',
    [1],
    function (tx, result) {
      if (result.rows.length === 0) {
        console.log('Not found');
        return;
      }
      console.log(result.rows.item(0).name);
    }
  );
});
Try It Yourself

How It Works

  1. Run SELECT with a bound WHERE value.
  2. Check rows.length—zero is success, not an error.
  3. Read columns from rows.item(0).
  4. See Retrieve for ORDER BY, LIMIT, and listing all rows.

Example 4 — Mini HTML Demo

Open, seed, and read from buttons on one page.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web SQL Demo</title>
</head>
<body>
  <h1>Web SQL Demo</h1>
  <button type="button" id="seedBtn" disabled>Seed</button>
  <button type="button" id="getBtn" disabled>Get id 1</button>
  <p id="status">Opening…</p>

  <script>
    var statusEl = document.getElementById('status');
    if (!window.openDatabase) {
      statusEl.textContent = 'Web SQL is not available.';
    } else {
      var db = openDatabase('hubDemoDb', '1.0', 'Demo', 1024 * 1024);
      db.transaction(function (tx) {
        tx.executeSql(
          'CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY, name TEXT)'
        );
      }, null, function () {
        statusEl.textContent = 'Ready.';
        document.getElementById('seedBtn').disabled = false;
        document.getElementById('getBtn').disabled = false;
      });

      document.getElementById('seedBtn').addEventListener('click', function () {
        db.transaction(function (tx) {
          tx.executeSql(
            'INSERT OR REPLACE INTO contacts (id, name) VALUES (?, ?)',
            [1, 'Alex Rivera']
          );
        }, null, function () {
          statusEl.textContent = 'Seeded id 1.';
        });
      });

      document.getElementById('getBtn').addEventListener('click', function () {
        db.transaction(function (tx) {
          tx.executeSql(
            'SELECT name FROM contacts WHERE id = ?',
            [1],
            function (tx, result) {
              statusEl.textContent = result.rows.length
                ? result.rows.item(0).name
                : 'Not found';
            }
          );
        });
      });
    }
  </script>
</body>
</html>
Try It Yourself

How It Works

  1. Feature-detect and open the database on load.
  2. Seed with INSERT OR REPLACE so repeat clicks stay safe.
  3. Read with SELECT ... WHERE id = ? and show the name.
  4. Continue with UPDATE and DELETE tutorials for the rest of CRUD.

Edge Cases & Pitfalls

Most beginner bugs come from missing feature detection, unbound SQL, or forgetting transactions.

legacy

API may be missing

Always check window.openDatabase. Modern Chrome has no Web SQL.

tx

SQL needs a transaction

Every executeSql call must run inside db.transaction() (or readTransaction for reads).

inject

Bind with ?

Never concatenate user input into SQL strings. Pass values in the arguments array.

rows

Use rows.item(i)

result.rows is array-like. Prefer item(i) and length—do not assume forEach works.

WHERE

Missing WHERE is dangerous

UPDATE / DELETE without WHERE changes or removes every row in the table.

Compatibility

Browser Support

Web SQL is a deprecated client-side API. Firefox never shipped it. Chrome removed it (about Chrome 97+). Detect with window.openDatabase before running demos.

✓ Deprecated

Web SQL API

Educational / legacy only. Prefer IndexedDB for new production apps.

Legacy Modern browser support
Google Chrome Removed ~97+
Removed
Mozilla Firefox —
Never supported
Apple Safari Legacy
Historical / limited
Microsoft Edge Removed
Removed (Chromium)
Opera Removed
Removed (Chromium)
Samsung Internet Legacy
Do not rely on
Internet Explorer —
Not supported
Web SQL Deprecated

Bottom line: For new web apps, use IndexedDB. Keep Web SQL only for maintaining old codebases.

Remember

Key Takeaways

  • Role: Web SQL ran SQLite in the browser—now deprecated.
  • Flow: openDatabase → transaction → executeSql.
  • CRUD: INSERT / SELECT / UPDATE / DELETE with bound ? params.
  • Path: learn INSERT → SELECT → UPDATE → DELETE; prefer IndexedDB for new work.

One line: open a DB, run SQL inside transactions, then move new apps to IndexedDB.

Frequently Asked Questions

Web SQL Database is a deprecated browser API that stores structured data in a local SQLite database. You open it with openDatabase() and run standard SQL statements (CREATE TABLE, INSERT, SELECT, UPDATE, DELETE) inside db.transaction() using tx.executeSql().
Web SQL is deprecated and removed from most modern browsers, including current Chrome. Firefox never implemented it. Treat this tutorial as educational for legacy code; use IndexedDB for new projects.
The W3C stopped standardizing Web SQL because it relied on a single vendor's SQLite implementation, making cross-browser behavior hard to guarantee. IndexedDB became the recommended client-side database API.
Call openDatabase(name, version, displayName, estimatedSize). Example: openDatabase('myApp', '1.0', 'My App DB', 2 * 1024 * 1024). Feature-detect with window.openDatabase first.
The Web SQL API requires every executeSql call to run within db.transaction(). Transactions group statements atomically—if one fails, the whole transaction can roll back, keeping data consistent.
Use IndexedDB for new browser storage. It is supported across modern browsers, handles larger datasets, and works with structured JavaScript objects. localStorage is fine for simple key-value strings only.

Next: Web SQL INSERT

Add your first rows with INSERT INTO and bound ? parameters.

Insert tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

HTML Session Storage HTML Web SQL INSERT