Database Storage for HTML5 local Storage, html5storage

Last Update:2014-09-28 Source: Internet

Author: User

Tags add time

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Database Storage for HTML5 local Storage, html5storage

In the previous article Web Storage of HTML5 local Storage, we briefly introduced how to use localStorage to implement local Storage. In fact, apart from sessionStorage and localStorage, HTML5 also supports local data storage through a local database. HTML5 uses a file-type database such as "SQLite", which is mostly concentrated on embedded devices and familiar with IOS/Android development, be familiar with SQLite databases.

The 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

. Code

Var db = openDatabase (databasename, version, description, size)

This method has four parameters for the following functions:

Databasename: Database Name;
Version: indicates the database version. This parameter is optional;
Description: Database description;
Share the best UI front-end framework!
Size: the size of the space allocated to the database;

2. Use the Database Access Object (such as db) created in step 1 to execute the transaction method for transaction processing;

. Code

Db. transaction (function (tx )){
// Execute the database access statement
});

The transaction method uses a callback function as a parameter. In this function, perform specific operations to access the database;

3. Execute the query using the executeSql Method

. Code

Tx.exe cuteSql (sqlQuery, [value1, value2..], dataHandler, errorHandler)

The executeSql method has the following four parameters:

SqlQuery: the SQL statement that needs to be executed. It can be create, select, update, or delete;
[Value1, value2...]: an array of all the parameters used in an SQL statement. In the executeSql method, use "?" to specify the parameters used in an SQL statement. Replace, and put these parameters in the second array in sequence;
DataHandler: The call callback function is used to obtain the query result set;
ErrorHandler: the callback function called when the execution fails;

This article uses HTML5 database support to re-implement Address Book Management in the previous article. The functions to be implemented are as follows:

You can create a contact and save it to the database. The contact fields include name, mobile phone number, company, and creation time;
Lists all currently saved contact information;
You can delete specific contact information;

Similarly, prepare an HTML page as follows:

Share the best UI front-end framework !. Code

<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> local database for HTML5 local storage </title>
<Style>
. AddDiv {
Border: 2px dashed # ccc;
Width: 400px;
Text-align: center;
}
</Style>
</Head>
<Body onload = "loadAll ()">
<Div class = "addDiv">
<Label for = "user_name"> name: </label>
<Input type = "text" id = "user_name" name = "user_name" class = "text"/>
<Br/>
<Label for = "mobilephone"> mobile phone: </label>
<Input type = "text" id = "mobilephone" name = "mobilephone"/>
<Br/>
<Label for = "mobilephone"> company: </label>
<Input type = "text" id = "company" name = "company"/>
<Br/>
<Input type = "button" onclick = "save ()" value = "add record"/>
</Div>
<Br/>
<Div id = "list">
</Div>
</Body>
</Html>

The interface is shown as follows:

To create a new contact and store it in the database, you need the following simple JavaScript code:

. Code

// 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.exe cuteSql ('insert into contact values (?,?,?,?) ', [User_name, mobilephone, company, time], onSuccess, onError );
});
}
// The callback function executed after the SQL statement is executed successfully
Function onSuccess (tx, rs ){
Alert ("operation successful ");
LoadAll ();
}
// The callback function executed when the SQL statement fails to be executed
Function onError (tx, error ){
Alert ("operation failed, failure message:" + error. message );
}

To display the list of all existing contacts, you can use the following JS Code:

Share the best UI front-end framework !. Code

// Retrieve all contacts stored in the sqlLite Database
Function loadAll (){
Var list = document. getElementById ("list ");
Db. transaction (function (tx ){
// If the data table does not exist, create a data table
Tx.exe cuteSql ('create table if not exists contact (name text, phone text, company text, createtime INTEGER) ', []);
// Query all contact records
Tx.exe cuteSql ('select * from contact ', [], function (tx, rs ){
If (rs. rows. length> 0 ){
Var result = "<table> ";
Result + = "<tr> <th> NO. </th> <th> name </th> <th> mobile phone </th> <th> company </th> <th> Add time </th> <th> operation </th> </tr> ";
For (var I = 0; I <rs. rows. length; I ++ ){
Var row = rs. rows. item (I );
// Convert the 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 + = "<tr> <td>" + (I + 1) + "</td> <td>" + row. name + "</td> <td>" + row. phone + "</td> <td>" + row. company + "</td> <td>" + timeStr + "</td> <input type = 'button 'value = 'Delete 'onclick = 'del (" + row. phone + ") '/> </td> </tr> ";
}
List. innerHTML = result;
} Else {
List. innerHTML = "the current data is empty. Please join the contact ";
}
});
});
}

For the format function that involves formatting time, see the following JS implementation:

. Code

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 implementation is as follows:

Share the best UI front-end framework!

To implement a specific contact, you need to execute the following JS Code:

. Code

// Delete the contact information
Function del (phone ){
Db. transaction (function (tx ){
// Note that the phone parameter to be displayed here is converted to the string type.
Tx.exe cuteSql ('delete from contact where phone =? ', [String (phone)], onSuccess, onError );
});
}

For more information about Table Styles, see the following CSS code:

Share the best UI front-end framework !. 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;
}

Where is the data stored in HTML5 local storage?

The basic usage is as follows: localStorage. name = "k1w1"; in this way, a database on your local disk stores the data. I could not accept the data written to my local disk and could not find its exact location. So I found that Chrome is stored in the form of sqlite database files. In C: \ Users \ Username \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ Local Storage, although the suffix is. localstorege is actually a database file of sqlite. You can open it with sqlite and see the data in it. I want to delete some junk data generated when I learned to use local storage. Just like I used to delete cookies. Firefox is not found at the moment. It feels like sqlite database files are encrypted (in this case, firefox is more secure ), however, every time I turn firefox off, it will automatically delete all browsing data, so I do not want to find out where it exists.

For local storage of html5 LocalStorage

The following are the storage methods of the five browsers localStorage:

In addition to BASE64 encryption (BASE64 can also be easily decrypted), other browsers use Plaintext to store data.
Therefore, we recommend that you do not use localStorage to store sensitive information, which may be encrypted.

For more information, see HTML5 local storage security analysis.
Blog.csdn.net /...

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More