Introduction to Database Storage application of HTML5 local storage

Introduction to Database Storage application of HTML5 local storage_html5 tutorial skills

WBOY

Release： 2016-05-16 15:50:34

Original

1809 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

Name:

Mobile phone:

Company:< /label>

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 numberNameMobile phoneCompany< /th>Add timeOperation";
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 :

Copy code

代码如下:

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
td {
border-right: 1px solid #C9DAD7;
border-bottom: 1px solid #C9DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}