Web SQL lets you add rows with a normal SQL INSERT statement, run through tx.executeSql() inside a transaction. Bind values with ?, then read result.insertId for the new row’s id when you use an auto-increment primary key.
Pair this with SELECT to read rows back, and UPDATE to change them later. For new apps, prefer IndexedDB insert.
Web SQL is obsolete and removed from modern Chrome. Use this page to maintain legacy code or learn SQL inserts. New projects should use IndexedDB.
INSERT OR REPLACE upserts by primary key. INSERT OR IGNORE skips duplicates. Always bind user values with ?—never concatenate SQL strings.
INSERT INTO table_name (columns) VALUES (?, …)In Web SQL, wrap that statement in executeSql with bound arguments:
tx.executeSql(
'INSERT INTO items (name, qty) VALUES (?, ?)',
[name, qty],
function (tx, result) { /* success */ },
function (tx, error) { /* failure */ }
);The executeSql call for an insert takes these arguments:
| Argument | Type | Description |
|---|---|---|
sqlStatement | String | The INSERT INTO ... VALUES (...) text, with ? placeholders for dynamic values. |
arguments | Array | Values bound to each ? in order—e.g. ['Notebook', 2]. |
successCallback | Function (optional) | Called as (tx, result). Inspect result.insertId and result.rowsAffected. |
errorCallback | Function (optional) | Called as (tx, error). Return true to roll back the transaction. |
List column names explicitly. Bind values with ?—never paste user input into the SQL string.
executeSql does not return a useful value itself. On success, your callback receives (tx, result). For INSERT, use result.insertId for the new row id and result.rowsAffected to confirm a row was added.
| Property | Type | Meaning after INSERT |
|---|---|---|
result.insertId | Number | The new row’s id (SQLite rowid / INTEGER PRIMARY KEY) |
result.rowsAffected | Number | How many rows were inserted (usually 1) |
result.rows | SQLResultSetRowList | Empty for INSERT (no selected rows) |
rowsAffected values:
| Value | What it means |
|---|---|
0 | No row was inserted (common with INSERT OR IGNORE when a duplicate key exists). |
1 or more | That many rows were added (or replaced with INSERT OR REPLACE). |
A typical single-row insert follows these steps:
openDatabase(name, version, displayName, size).db.transaction(function (tx) { ... }).CREATE TABLE IF NOT EXISTS if needed.INSERT via tx.executeSql(sql, args, success, error).insertId / rowsAffected in the success callback.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);
},
function (tx, error) {
console.error(error.message);
return true;
}
);
});Insert a contact, list rows, or clear the table. Status updates below. Many modern browsers no longer support Web SQL—if so, the status box will say so.
Short, copy-ready snippets. Use Try It Yourself for a live editor. Demos need a browser that still exposes openDatabase.
Add one row with bound ? parameters.
db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO items (name, qty) VALUES (?, ?)',
['Notebook', 2],
function (tx, result) {
console.log('Inserted', result.rowsAffected, 'row(s)');
}
);
});INSERT ... VALUES (?, ?) with a bound args array.rowsAffected to confirm the insert.Capture the auto-generated primary key after insert.
db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO contacts (name, email) VALUES (?, ?)',
['Sam Lee', '[email protected]'],
function (tx, result) {
console.log('New contact id:', result.insertId);
}
);
});result.insertId in the success callback.Upsert by primary key: replace the existing row if the key already exists.
db.transaction(function (tx) {
tx.executeSql(
'INSERT OR REPLACE INTO items (id, name, qty) VALUES (?, ?, ?)',
[1, 'Notebook', 5],
function (tx, result) {
console.log('Upserted; rowsAffected =', result.rowsAffected);
}
);
});INSERT OR REPLACE instead of plain INSERT.Skip the insert when a unique constraint would fail—keep the original row.
db.transaction(function (tx) {
tx.executeSql(
'INSERT OR IGNORE INTO items (id, name) VALUES (?, ?)',
[1, 'Duplicate attempt'],
function (tx, result) {
if (result.rowsAffected === 0) {
console.log('Ignored — id 1 already exists');
} else {
console.log('Inserted id', result.insertId);
}
}
);
});INSERT OR IGNORE for soft duplicate handling.rowsAffected—0 means the row was skipped.Create a table on load, then insert a row from a button click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web SQL Insert Demo</title>
</head>
<body>
<h1>Web SQL INSERT</h1>
<button type="button" id="insertBtn">Insert sample</button>
<p id="status">Opening…</p>
<script>
var statusEl = document.getElementById('status');
if (!window.openDatabase) {
statusEl.textContent = 'Web SQL is not available in this browser.';
} else {
var db = openDatabase('insertDemoDb', '1.0', 'Demo', 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(
'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, name TEXT, qty INTEGER)'
);
}, null, function () {
statusEl.textContent = 'Ready. Click Insert.';
});
document.getElementById('insertBtn').addEventListener('click', function () {
db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO items (name, qty) VALUES (?, ?)',
['Sample', 1],
function (tx, result) {
statusEl.textContent = 'Inserted id ' + result.insertId + '.';
}
);
});
});
}
</script>
</body>
</html>openDatabase before running any SQL.IF NOT EXISTS.INSERT ... VALUES (?, ?).insertId in the status text.Most INSERT bugs come from unbound input, missing tables, or ignoring constraint conflicts.
?Never build SQL with string concatenation from user input. Pass values in the arguments array.
Plain INSERT errors on unique conflicts. Use OR REPLACE or OR IGNORE when that is intentional.
Run CREATE TABLE IF NOT EXISTS before inserting, or the statement fails with “no such table”.
All executeSql calls belong inside db.transaction().
Feature-detect window.openDatabase. Modern Chrome has no Web SQL—point users to IndexedDB.
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.
Educational / legacy only. Prefer IndexedDB add() and put() for new production apps.
Bottom line: For inserts in new web apps, use IndexedDB insert. Keep Web SQL only for maintaining old codebases.
INSERT INTO t (cols) VALUES (?, ?) inside db.transaction().result.insertId in the success callback.OR REPLACE or OR IGNORE instead of plain INSERT.One line: insert with INSERT INTO t (...) VALUES (?, ?) via executeSql, read insertId, prefer IndexedDB going forward.
Read rows with SELECT after you insert them.
10 people found this page helpful