> **Status of Web SQL:** The Web SQL API has been deprecated and is no longer recommended. New browser standards prefer using IndexedDB to handle client-side storage. Web SQL is only still supported in some older browsers.\\n\\nAlternative: Due to the uncertain future of Web SQL and its lack of broad support, it is recommended to switch to IndexedDB, which is a modern browser API that supports transactions and key-value pair storage.\\n\\nThe Web SQL Database API is not part of the HTML5 specification, but it is a separate specification that introduces a set of APIs for operating client-side databases using SQL.\\n\\nIf you are a Web back-end programmer, you should easily understand SQL operations.\\n\\nYou can also refer to our (#) to learn more about database operations.\\n\\nThe Web SQL database can work in the latest versions of Safari, Chrome, and Opera browsers.\\n\\n* * *\\n\\n## Core Methods\\n\\nThe following are the three core methods defined in the specification:\\n\\n1. **openDatabase**: This method creates a database object using an existing database or creates a new database.\\n2. **transaction**: This method allows us to control a transaction, and perform a commit or rollback based on the situation.\\n3. **executeSql**: This method is used to execute the actual SQL query.\\n\\n* * *\\n\\n## Opening a Database\\n\\nWe can use the openDatabase() method to open an existing database. If the database does not exist, a new database will be created. The code is as follows:\\n\\nvar db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);\\nThe five parameters corresponding to the openDatabase() method are described as follows:\\n\\n1. Database name\\n2. Version number\\n3. Description text\\n4. Database size\\n5. Creation callback\\n\\nThe fifth parameter, the creation callback, will be called after the database is created.\\n\\n* * *\\n\\n## Executing Queries\\n\\nOperations are executed using the database.transaction() function:\\n\\nvar db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); });\\n\\nAfter the above statement is executed, a table named LOGS will be created in the 'mydb' database.\\n\\n* * *\\n\\n## Inserting Data\\n\\nAfter executing the above table creation statement, we can insert some data:\\n\\nvar db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "example.com")'); });\\n\\nWe can also use dynamic values to insert data:\\n\\nvar db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]); });\\n\\nIn the example, e_id and e_log are external variables, and executeSql will map each entry in the array parameter to the "?".\\n\\n* * *\\n\\n## Reading Data\\n\\nThe following example demonstrates how to read data that already exists in the database:\\n\\nvar db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "example.com")'); }); db.transaction(function(tx){tx.executeSql('SELECT * FROM LOGS', [], function(tx, results){var len = results.rows.length, i; msg = "
Query the number of records: " + len + "
"; document.querySelector('#status').innerHTML += msg; for(i = 0; i<len; i++){alert(results.rows.item(i).log); }}, null); });\\n\\n* * *\\n\\n## Complete Example\\n\\n## Example\\n\\nvar db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "example.com")'); msg = '
The data table has been created, and two records have been inserted.
'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function(tx){tx.executeSql('SELECT * FROM LOGS', [], function(tx, results){var len = results.rows.length, i; msg = "
Query the number of records: " + len + "
"; document.querySelector('#status').innerHTML += msg; for(i = 0; i<len; i++){msg = "
" + results.rows.item(i).log + "
"; document.querySelector('#status').innerHTML += msg; }}, null); });\\n\\n[Try it out »](#)\\n\\nThe running result of the above example is shown in the figure below:\\n\\n!(#)\\n\\n* * *\\n\\n## Deleting Records\\n\\nThe format used to delete records is as follows:\\n\\ndb.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1');});\\nThe specified data id to delete can also be dynamic:\\n\\ndb.transaction(function(tx) { tx.executeSql('DELETE FROM LOGS WHERE id=?', );});\\n\\n* * *\\n\\n## Updating Records\\n\\nThe format used to update records is as follows:\\n\\ndb.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log='www.w3cschool.cc' WHERE id=2');});\\nThe specified data id to update can also be dynamic:\\n\\ndb.transaction(function(tx) { tx.executeSql('UPDATE LOGS SET log='www.w3cschool.cc' WHERE id=?', );});\\n\\n* * *\\n\\n## Complete Example\\n\\n## Example\\n\\nvar db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "example.com")'); msg = '
The data table has been created, and two records have been inserted.
'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function(tx){tx.executeSql('DELETE FROM LOGS WHERE id=1'); msg = '
Delete id is 1 'srecord.
'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function(tx){tx.executeSql('UPDATE LOGS SET log='www.w3cschool.cc' WHERE id=2'); msg = '
Update id is 2 'srecord.
'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function(tx){tx.executeSql('SELECT * FROM LOGS', [], function(tx, results){var len = results.rows.length, i; msg = "
Query the number of records: " + len + "
"; document.querySelector('#status').innerHTML += msg; for(i = 0; i<len; i++){msg = "
" + results.rows.item(i).log + "
"; document.querySelector('#status').innerHTML += msg; }}, null); });\\n\\n[Try it out »](#)\\n\\nThe running result of the above example is shown in the figure below:\\n\\n!(#)
YouTip