[Switch] HTML5 local storage-Web SQL Database, html5database
In HTML5 WebStorage, the Local Storage and Session Storage of html5 Local Storage are introduced. These two solutions are based on key-value pairs. It is useful to store a small amount of data structures, however, there is nothing to do with a large amount of structured data, and the flexibility is not powerful enough.
Web SQL Database
We often process a large amount of structured data in the Database. html5 introduces the concept of Web SQL Database, which uses SQL to manipulate the APIs of the client Database. These APIs are asynchronous, the dialect used in the specification is SQLlite, which is the cause of the tragedy. The Web SQL Database standard page has such a statement
This document was on the W3C Recommendation track but specification work has stopped. the specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
Which means
This document was used in W3C recommendation specifications, but its work has been stopped. Currently, all implementations are based on the same SQL backend (SQLite), but we need more independent implementations to complete standardization.
That is to say, this is an obsolete standard, although some browsers have implemented it, .......
Three core methods
However, there is no harm in learning it, and we can compare it with the IndexedDB promoted by W3C to see why this solution should be abandoned. Three core methods defined in the Web SQL Database specification:
OpenDatabase
We can use such a simple statement to create or open a local database object.
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
OpenDatabase receives five parameters:
If a callback function is provided, the callback function is used to call the changeVersion () function. No matter the given version number, the callback function sets the database version number to null. If the callback function is not provided, the database is created with the given version number.
Transaction
The transaction method is used to process transactions. When a statement fails to be executed, the entire transaction is rolled back. The method has three parameters.
db.transaction(function (context) { context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")'); });
In this example, we create a table and insert three pieces of data into the table. If any of the four statements has an error, the entire transaction will be rolled back.
ExecuteSql
The executeSql method is used to execute SQL statements and return results. The method has four parameters.
In the above example, we use the insert statement to look at the query example.
db.transaction(function (context) { context.executeSql('SELECT * FROM testTable', [], function (context, results) { var len = results.rows.length, i; console.log('Got '+len+' rows.'); for (i = 0; i < len; i++){ console.log('id: '+results.rows.item(i).id); console.log('name: '+results.rows.item(i).name); } });
Complete example
<!DOCTYPE HTML>
Last
Since the Web SQL Database specification has been abandoned, it is clear that the current SQL specification adopts the SQLite SQL dialect, which is unacceptable as a standard, each browser has its own implementation of this standard. In this way, browser compatibility is not important and may be forgotten. However, the Chrome console is really easy to use. The new html5 content, such as Shenma cookie, Local Storage, Session Storage, Web SQL, IndexedDB, and Application Cache, is clear and clear, saving a lot of debugging code work.