Home >
Web Front-end >
H5 Tutorial >
Introduction to Database Storage application of HTML5 local storage_html5 tutorial skills
Introduction to Database Storage application of HTML5 local storage_html5 tutorial skills
WBOY
Release: 2016-05-16 15:50:34
Original
1811 people have browsed it
In the previous article "Web Storage of HTML5 Local Storage", we briefly introduced how to use localStorage to achieve local storage; in fact, in addition to sessionStorage and localStorage, HTML5 also supports local data storage through local databases , HTML5 uses a file-type database such as "SQLLite", which is mostly concentrated on embedded devices. Students who are familiar with IOS/Android development should be familiar with the SQLLite database. Database operations in HTML5 are relatively simple, mainly including the following two functions: 1. Create an object to access the database through the openDatabase method
Copy the code
The code is as follows:
var db = openDatabase(databasename,version,description,size)
This method has four parameters, their functions are: databasename: database name; version: database version number, optional; description: database description; size: space allocated for the database Size; 2. Use the database access object (such as db) created in the first step to execute the transaction method to perform transaction processing
Copy code
The code is as follows:
db.transaction(function(tx)){ //Execute the statement to access the database } ; >
Copy code
The code is as follows:
tx.executeSql(sqlQuery,[value1,value2. .], dataHandler, errorHandler) The executeSql method has four parameters, and their functions are as follows:
sqlQuery: The sql statement that needs to be executed specifically, which can be create, select, update, delete;
[value1,value2..]: An array of all parameters used in the sql statement. In the executeSql method, first replace the parameters to be used in the sql statement with "?", and then put these parameters into an array in sequence. In the second parameter;
dataHandler: the callback function called when the execution is successful, through which the query result set can be obtained; errorHandler: the callback function called when the execution fails; This article is supported by the database of HTML5 , re-implement the address book management in the previous article. The functions to be implemented are as follows:
Contacts can be created and saved in the database. Contact fields include: name, mobile phone number, company, creation time; column Export all currently saved contact information; can delete specific contact information;
Similarly, prepare an HTML page first, as follows :
Copy code
The code is as follows:
HTML5 local storage local database article
div> Function requires the following simple JS code:
Copy the code
The code is as follows:
//Open the database var db = openDatabase('contactdb','','local database demo',204800); //Save data function save(){ var user_name = document.getElementById("user_name").value; var mobilephone = document.getElementById("mobilephone").value; var company = document.getElementById("company").value; //Creation time var time = new Date().getTime(); db.transaction(function(tx){ tx.executeSql('insert into contact values(?,? ,?,?)',[user_name,mobilephone,company,time],onSuccess,onError); }); } //The callback function executed after the sql statement is successfully executed function onSuccess(tx,rs){ alert("Operation successful"); loadAll(); } //The callback function executed after the SQL statement fails to execute function onError(tx ,error){ alert("Operation failed, failure message: " error.message); }
To display all currently saved contact lists, you can use the following JS Code implementation:
Copy code
The code is as follows:
//Store everything in Get all the contacts in the sqlLite database function loadAll(){ var list = document.getElementById("list"); db.transaction(function(tx){ //if If the data table does not exist, create the data table tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]); //Query all contacts Person record tx.executeSql('select * from contact',[],function(tx,rs){ if(rs.rows.length>0){ var result = "
result = "
Serial number
Name
Mobile phone
Company< /th>
Add time
Operation
"; for(var i=0;ivar row = rs.rows.item(i); //Convert time and format the output var time = new Date(); time.setTime(row.createtime ); var timeStr = time.format("yyyy-MM-dd hh:mm:ss"); //Assemble the row nodes of a table result = "
" row.name "
" row.phone "
" row.company "< ;/td>
" timeStr "
< /td>
"; } list.innerHTML = result; }else{ list.innerHTML = "The data is currently empty, start adding contacts quickly"; } }); }); }
Among them, the format function involving formatting time can be implemented with reference to the following JS:
Copy code
The code is as follows:
Date.prototype.format = function (format) { var o = { "M " : this.getMonth() 1, //month "d " : this.getDate(), //day "h " : this.getHours(), //hour "m " : this.getMinutes(), //minute "s " : this.getSeconds(), //second "q " : Math.floor((this.getMonth() 3)/3), //quarter "S" : this.getMilliseconds() //millisecond } if(/(y )/ .test(format)) format=format.replace(RegExp.$1, (this.getFullYear() "").substr(4 - RegExp.$1.length)); for(var k in o )if(new RegExp("(" k ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00" o[k]).substr(("" o[k]).length)); return format; }
Finally, the interface The implementation effect is as follows:
To implement a specific contact, you need to execute the following JS code :
Copy code
The code is as follows:
//Delete contact information function del(phone){ db.transaction(function(tx) { //Note that what needs to be shown here is to convert the incoming parameter phone into a string type tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError) ; }); }
For the table style in the screenshot above, please refer to the following CSS code :
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn