Learning summary of Web Sql in HTML5

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(数据库名，数据库版本号，描述，数据库大小，数据库创建成功的回调);
var mydb = openDatabase('myTeatDatabase',1,'this a Web Sql Database',1024*1024,function(){
     //数据库创建成功的回调，可省略
});

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){
　　　　//该方法有一个事务对象参数供使用，该对象上有一系列为数据库增删改查的方法。
});

Perform an operation:

tx.executeSql(执行数据库操作的sql语句，参数，数据库操作执行成功的回调，数据库操作执行失败的回调);

Specific database operations:

Create a data table:

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

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){
      //删除成功时的回调
      }，function(error){ 
         //删除失败时的回调
      });

Add a piece of data to the data table:

tx.executeSql('insert into table1 (id,name) values (1,'小明')',[],function(tx,result){
            //添加数据成功时的回调
            }，function(error){
                  //添加数据失败时的回调
            });

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

tx.executeSql('delete from table1 where id=1',[],function(tx,result){
//删除成功时的回调
}，function(error){
    //删除失败时的回调
});

or:

tx.executeSql('delete from table1 where id=？',[1],function(tx,result){
//删除成功时的回调
}，function(error){
    //删除失败时的回调
});

Update one piece of data in the database table: 　　　

tx.executeSql('updata table1 set name="小红" where id=1',[],function(tx,result){
   //数据更新成功时的回调
   }，function(error){
       //数据更新失败时的回调
   });

Query the data that meets the query conditions: 　　

tx.executeSql('select * from table',[],function(tx,result){
//查询成功时的回调
}，function(error){
  //查询失败时的回调
});

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!