The content of this article is to introduce the Web Sql learning summary of HTML5, so that everyone can understand some relevant knowledge of Web Sql. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In web systems or applications, it is often necessary to store some data locally. The earliest way to store data on the client was cookie (Of course, cookies are mainly used to save the user's status. You can do some work of saving local data in your spare time). In fact, it is not suitable for saving local data of the client. There are several reasons:

1. Every time the server is requested It will increase unnecessary traffic consumption, because every time the server is requested, a cookie will be sent to the server.

2. The rules for storing cookie data are not easy to use and the structure is not clear enough.

3. The most important point is that the storage capacity of cookies is extremely small. The length of each cookie cannot exceed 4kb. If it exceeds the earliest stored cookie data, it will be truncated. The excess size is obviously not enough. of.

With the development of HTML5, localStorage and sessionStorage later appeared:

localStorage: permanent storage, no matter how long it takes to enter the page or page again The stored data can be obtained from the site where it is located (can be deleted using the clearI or removeItem method).

sessionStorage: Temporary storage, the saved data will be automatically cleared when the page is closed.

In fact, when working or developing your own projects, these two objects are used the most. At least for now, these two objects can still meet the local storage needs of most projects, although the storage structure is still not clear enough. Querying locally stored data is still too simple.

Now mainly to summarize,

The new API in HTML5-->Web Sql local database technology, the Web Sql database API is not actually a component of the HTML5 specification, it is a An independent specification, it can use the syntax basically consistent with the SQL language to add, delete, modify and query the local database, so developers with back-end development experience can easily get started (it should be pointed out that HTML5 has abandoned the Web Sql Database database. Work on specifying this specification has stopped), and even so, it is basically supported by most browsers. Now let's introduce its use:

Create a WebSql database:

openDatabase(數(shù)據(jù)庫名，數(shù)據(jù)庫版本號，描述，數(shù)據(jù)庫大小，數(shù)據(jù)庫創(chuàng)建成功的回調(diào));
var mydb = openDatabase('myTeatDatabase',1,'this a Web Sql Database',1024*1024,function(){
     //數(shù)據(jù)庫創(chuàng)建成功的回調(diào)，可省略
});

Note: This method returns a database access object. When the created database already exists, this method directly opens the database.

Create a transaction:

mydb.transaction(function(tx){
　　　　//該方法有一個事務(wù)對象參數(shù)供使用，該對象上有一系列為數(shù)據(jù)庫增刪改查的方法。
});

Perform an operation:

tx.executeSql(執(zhí)行數(shù)據(jù)庫操作的sql語句，參數(shù)，數(shù)據(jù)庫操作執(zhí)行成功的回調(diào)，數(shù)據(jù)庫操作執(zhí)行失敗的回調(diào));

Specific database operations:

Create a data table:

tx.executeSql('create table if not exists table1 (id unique,name)', [], function(tx, result) { 
	//成功回調(diào)
	}，function(error){
         //失敗回調(diào)
	});

Note: The meaning of this statement It is to create a data table table1. When this table does not exist in the database, if "if not exists" is not added to the statement, an error will be reported when the data table you want to create already exists in the database.

Delete a data table:

tx.exexcteSql('drop table table1',[],function(tx,result){
      //刪除成功時的回調(diào)
      }，function(error){ 
         //刪除失敗時的回調(diào)
      });

Add a piece of data to the data table:

tx.executeSql('insert into table1 (id,name) values (1,'小明')',[],function(tx,result){
            //添加數(shù)據(jù)成功時的回調(diào)
            }，function(error){
                  //添加數(shù)據(jù)失敗時的回調(diào)
            });

Delete one or more pieces of data in the data table:

tx.executeSql('delete from table1 where id=1',[],function(tx,result){
//刪除成功時的回調(diào)
}，function(error){
    //刪除失敗時的回調(diào)
});

or:

tx.executeSql('delete from table1 where id=？',[1],function(tx,result){
//刪除成功時的回調(diào)
}，function(error){
    //刪除失敗時的回調(diào)
});

Update one piece of data in the database table: 　　　

tx.executeSql('updata table1 set name="小紅" where id=1',[],function(tx,result){
   //數(shù)據(jù)更新成功時的回調(diào)
   }，function(error){
       //數(shù)據(jù)更新失敗時的回調(diào)
   });

Query the data that meets the query conditions: 　　

tx.executeSql('select * from table',[],function(tx,result){
//查詢成功時的回調(diào)
}，function(error){
  //查詢失敗時的回調(diào)
});

Note: When the query is successful, you can use the data returned by the query through the rows attribute of the result parameter in the callback function.

This example is just the simplest query statement. If you need more complex queries, you can refer to the sql statement.

Summary:

To give a brief summary, in fact, this database API is relatively simple. All additions, deletions, modifications and queries require the creation of a transaction. Perform all operations on the transaction object. Currently, the API does not support deleting the entire database, but we can clear the database by deleting all data tables in that database to achieve a similar effect.

The above is the detailed content of Learning summary of Web Sql in HTML5. For more information, please follow other related articles on the PHP Chinese website!