Web SQL lets you change existing rows with a normal SQL UPDATE statement, run through tx.executeSql() inside a transaction. Use SET for the new values and WHERE to target specific rows—then check result.rowsAffected.
Pair this with SELECT to read a row first, and INSERT when the row may not exist yet. For new apps, prefer IndexedDB update.
Web SQL is obsolete and removed from modern Chrome. Use this page to maintain legacy code or learn SQL updates. New projects should use IndexedDB.
UPDATE without WHERE changes every row. Prefer UPDATE over INSERT OR REPLACE when you only need to change some columns on a row that already exists.
UPDATE table_name SET col = ? WHERE conditionIn Web SQL, wrap that statement in executeSql with bound arguments:
tx.executeSql(
'UPDATE items SET name = ?, qty = ? WHERE id = ?',
[name, qty, id],
function (tx, result) { /* success */ },
function (tx, error) { /* failure */ }
);The executeSql call for an update takes these arguments:
| Argument | Type | Description |
|---|---|---|
sqlStatement | String | The UPDATE ... SET ... WHERE ... text, with ? placeholders for dynamic values. |
arguments | Array | Values bound to each ? in order—SET values first, then WHERE values (e.g. [name, qty, id]). |
successCallback | Function (optional) | Called as (tx, result). Inspect result.rowsAffected. |
errorCallback | Function (optional) | Called as (tx, error). Return true to roll back the transaction. |
Always use WHERE for targeted updates. 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 UPDATE, use result.rowsAffected to see how many rows were changed.
| Property | Type | Meaning after UPDATE |
|---|---|---|
result.rowsAffected | Number | How many rows were updated |
result.insertId | Number | Not useful for UPDATE (used after INSERT) |
result.rows | SQLResultSetRowList | Empty for UPDATE (no selected rows) |
rowsAffected values:
| Value | What it means |
|---|---|
0 | No row matched your WHERE (wrong id or row does not exist). Not an error. |
1 or more | That many rows were updated successfully. |
A typical single-row update follows these steps:
openDatabase(name, version, displayName, size).db.transaction(function (tx) { ... }).UPDATE via tx.executeSql(sql, args, success, error).rowsAffected in the success callback.true to roll back).db.transaction(function (tx) {
tx.executeSql(
'UPDATE contacts SET name = ?, email = ? WHERE id = ?',
['Alex Updated', '[email protected]', 1],
function (tx, result) {
console.log('Updated', result.rowsAffected);
},
function (tx, error) {
console.error(error.message);
return true;
}
);
});Seed a contact, update it, read it back, or clear. 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.
Change one contact whose primary key is 1.
db.transaction(function (tx) {
tx.executeSql(
'UPDATE contacts SET name = ? WHERE id = ?',
['Alex Updated', 1],
function (tx, result) {
console.log('Updated', result.rowsAffected, 'row(s)');
}
);
});UPDATE ... SET ... WHERE id = ? with bound values.rowsAffected so you know a row was changed.Zero means “not found”—not a thrown error. Show clear UI feedback.
function updateContact(db, id, name) {
db.transaction(function (tx) {
tx.executeSql(
'UPDATE contacts SET name = ? WHERE id = ?',
[name, id],
function (tx, result) {
if (result.rowsAffected === 0) {
console.warn('No row with id', id);
} else {
console.log('Updated id', id);
}
}
);
});
}
updateContact(db, 99, 'Missing');rowsAffected in the success callback.Change several fields in one statement. Bind SET values before the WHERE value.
db.transaction(function (tx) {
tx.executeSql(
'UPDATE contacts SET name = ?, email = ? WHERE id = ?',
['Sam Lee', '[email protected]', 1],
function (tx, result) {
console.log('Updated', result.rowsAffected, 'row(s)');
}
);
});SET clause with its own ?.rowsAffected after success.Mark every open task as done with one statement.
db.transaction(function (tx) {
tx.executeSql(
'UPDATE tasks SET done = ? WHERE done = ?',
[1, 0],
function (tx, result) {
console.log('Marked', result.rowsAffected, 'task(s) done');
}
);
});WHERE done = ? instead of updating one id at a time.Seed a record on load, then update it 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 Update Demo</title>
</head>
<body>
<h1>Web SQL UPDATE</h1>
<button type="button" id="updateBtn">Update id 1</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('updateDemoDb', '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)'
);
tx.executeSql(
'INSERT OR REPLACE INTO items (id, name, qty) VALUES (?, ?, ?)',
[1, 'Notebook', 2]
);
}, null, function () {
statusEl.textContent = 'Ready. Click Update.';
});
document.getElementById('updateBtn').addEventListener('click', function () {
db.transaction(function (tx) {
tx.executeSql(
'UPDATE items SET name = ?, qty = ? WHERE id = ?',
['Notebook Pro', 5, 1],
function (tx, result) {
statusEl.textContent = 'Updated ' + result.rowsAffected + ' row (id 1).';
}
);
});
});
}
</script>
</body>
</html>openDatabase before running any SQL.UPDATE ... SET ... WHERE id = ?.rowsAffected in the status text.Most UPDATE bugs come from a missing WHERE, wrong arg order, or ignoring rowsAffected.
UPDATE items SET qty = 0 changes every row. Always double-check the clause before shipping.
? orderPut SET values first in the array, then WHERE values. Swapping them updates the wrong fields or ids.
A successful callback with zero rows means nothing matched—show a “not found” message.
?Never build SQL with string concatenation from user input. Pass values in the arguments array.
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 put() and cursor update() for new production apps.
Bottom line: For updates in new web apps, use IndexedDB update. Keep Web SQL only for maintaining old codebases.
UPDATE t SET col = ? WHERE id = ? inside db.transaction().result.rowsAffected in the success callback.? in the correct order.One line: update with UPDATE t SET ... WHERE ... via executeSql, check rowsAffected, prefer IndexedDB going forward.
Move heavy work off the main thread after you finish Web SQL CRUD.
10 people found this page helpful