HTML Web SQL INSERT

Introduction

Web SQL Database is a browser API that stores structured data in a local SQLite database. You interact with it using familiar SQL statements—including INSERT to add new rows. Although Web SQL is deprecated and no longer recommended for new projects, learning how inserts work helps you maintain legacy apps and understand client-side storage concepts.

This tutorial focuses specifically on inserting data into a Web SQL database: opening the database, creating a table, running INSERT inside transactions, and handling success and errors safely.

What You’ll Learn

What Is Web SQL?

Web SQL Database is a deprecated web standard that lets web pages store data in a relational, client-side database. It uses the SQLite engine under the hood, so developers who know SQL from MySQL or PostgreSQL can write similar queries— CREATE TABLE, INSERT, SELECT, UPDATE, and DELETE.

The W3C stopped standardizing Web SQL in 2010 in favor of IndexedDB. Chrome removed Web SQL in version 97 (2022). Safari still supports it in some versions, but you should not build new features on Web SQL. This page teaches the API for learning and legacy maintenance.

Setting Up the Database

Before inserting data, open the database and create the table that will hold your rows.

Step 1 — Open the database

openDatabase(name, version, displayName, estimatedSize) opens an existing database or creates a new one.

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

• name — unique database name (string).
• version — version string shown to the user.
• displayName — human-readable label.
• estimatedSize — expected size in bytes (here, 2 MB).

Step 2 — Create a table

Run CREATE TABLE IF NOT EXISTS inside the first transaction so the schema exists before any inserts.

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

Here id is the primary key and name stores the item label. Adjust columns to match your app’s data model.

📝 INSERT Syntax

Standard SQL INSERT adds one or more rows to a table:

INSERT INTO table_name (column1, column2) VALUES (value1, value2);

In Web SQL, you call it through executeSql inside a transaction:

tx.executeSql(
  'INSERT INTO items (id, name) VALUES (?, ?)',
  [id, name],
  function (tx, result) { /* success */ },
  function (tx, error)  { /* failure */ }
);

executeSql Parameters

• SQL string — the INSERT statement; use ? placeholders for values.
• Bindings array — values that replace each ? in order (prevents SQL injection).
• Success callback — runs when the insert succeeds; result.insertId holds the new row id (for AUTOINCREMENT columns).
• Error callback — runs on failure; read error.message for details.

Inserting Data into the Database

Inserting data means running an INSERT statement inside db.transaction. Always use parameterized queries (? placeholders) instead of building SQL strings from user input.

function insertItem(id, name) {
  db.transaction(function (tx) {
    tx.executeSql(
      'INSERT INTO items (id, name) VALUES (?, ?)',
      [id, name],
      function (tx, result) {
        console.log('Row inserted. insertId:', result.insertId);
      },
      function (tx, error) {
        console.error('Insert failed:', error.message);
        return true; /* return true to roll back the transaction */
      }
    );
  });
}

Call insertItem(1, 'Sample Item') to add a row. The success callback confirms the write; the error callback lets you log problems or show a message to the user.

Handling Success and Errors

Every executeSql call can succeed or fail. Handle both outcomes explicitly.

• Success callback — Confirms the INSERT ran. Use result.insertId when the table uses auto-increment ids, or result.rowsAffected to verify one row was added.
• Error callback — Fires on constraint violations (duplicate primary key), syntax errors, or missing tables. Log error.message and return true to roll back the entire transaction.
• Transaction-level callbacks — db.transaction(fn, errorFn, successFn) runs errorFn if the transaction fails and successFn when all statements commit.

db.transaction(
  function (tx) {
    tx.executeSql('INSERT INTO items (id, name) VALUES (?, ?)', [1, 'Sample Item']);
  },
  function (error) {
    console.error('Transaction rolled back:', error.message);
  },
  function () {
    console.log('Transaction committed successfully');
  }
);

Examples Gallery

These examples use the Web SQL API pattern. Use the Try It Yourself links to run live demos in the editor. Web SQL works only in browsers that still expose openDatabase (legacy Safari/WebKit builds); otherwise the demo shows a clear status message.

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

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

  tx.executeSql(
    'INSERT INTO items (id, name) VALUES (?, ?)',
    [1, 'Sample Item'],
    function (tx, result) {
      console.log('Inserted row id:', result.insertId);
    },
    function (tx, error) {
      console.error('Error:', error.message);
    }
  );
});

Inserted row id: 1

function insertItem(id, name) {
  db.transaction(function (tx) {
    tx.executeSql(
      'INSERT INTO items (id, name) VALUES (?, ?)',
      [id, name],
      function () { console.log('Saved:', name); },
      function (tx, error) {
        console.error('Insert error:', error.message);
        return true;
      }
    );
  });
}

insertItem(2, 'Notebook');
insertItem(3, 'Pen');

Saved: Notebook
Saved: Pen

const products = [
  { id: 10, name: 'Apple' },
  { id: 11, name: 'Banana' },
  { id: 12, name: 'Cherry' }
];

db.transaction(function (tx) {
  products.forEach(function (p) {
    tx.executeSql(
      'INSERT INTO items (id, name) VALUES (?, ?)',
      [p.id, p.name]
    );
  });
}, function (error) {
  console.error('Batch failed:', error.message);
}, function () {
  console.log('All ' + products.length + ' rows inserted');
});

All 3 rows inserted

function saveItem(id, name) {
  db.transaction(function (tx) {
    tx.executeSql(
      'INSERT OR REPLACE INTO items (id, name) VALUES (?, ?)',
      [id, name],
      function () { console.log('Upserted id', id); }
    );
  });
}

saveItem(1, 'Original name');
saveItem(1, 'Updated name'); /* replaces the first row */

Upserted id 1
Upserted id 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web SQL Insert Example</title>
</head>
<body>
  <h1>Insert Data into Web SQL</h1>
  <button type="button" id="insertBtn">Insert Sample Item</button>
  <p id="status"></p>

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

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

      function insertItem(id, name) {
        db.transaction(function (tx) {
          tx.executeSql(
            'INSERT INTO items (id, name) VALUES (?, ?)',
            [id, name],
            function () {
              document.getElementById('status').textContent =
                'Inserted: ' + name;
            },
            function (tx, error) {
              document.getElementById('status').textContent =
                'Error: ' + error.message;
              return true;
            }
          );
        });
      }

      document.getElementById('insertBtn').addEventListener('click', function () {
        insertItem(Date.now(), 'Sample Item');
      });
    }
  </script>
</body>
</html>

Inserted: Sample Item

🚀 Common Use Cases

• Offline form drafts — save user input locally before syncing to a server.
• Shopping cart cache — persist cart items between page reloads in legacy mobile web apps.
• Activity logs — append timestamped events to a local audit table.
• Settings storage — insert default preferences on first visit, then update later.
• Legacy maintenance — add rows to existing Web SQL databases in older enterprise apps.

📝 Notes

• Web SQL is deprecated—do not use it for new applications.
• All executeSql calls must run inside db.transaction.
• Always bind values with ? placeholders; never concatenate user input into SQL.
• Validate data in JavaScript before inserting (required fields, types, length limits).
• Duplicate primary keys cause errors unless you use INSERT OR REPLACE or INSERT OR IGNORE.
• Storage is per-origin; other sites cannot read your database.

💡 Best Practices