HTML5本地存儲(chǔ)之Database Storage應(yīng)用介紹
來源:易賢網(wǎng) 閱讀:1232 次 日期:2016-08-01 15:16:19
溫馨提示:易賢網(wǎng)小編為您整理了“HTML5本地存儲(chǔ)之Database Storage應(yīng)用介紹”,方便廣大網(wǎng)友查閱!

除了sessionStorage和localStorage外,HTML5還支持通過本地?cái)?shù)據(jù)庫進(jìn)行本地?cái)?shù)據(jù)存儲(chǔ),HTML5采用的是"SQLLite"這種文件型數(shù)據(jù)庫,該數(shù)據(jù)庫多集中在嵌入式設(shè)備上,熟悉IOS/Android開發(fā)的同學(xué),應(yīng)該對SQLLite數(shù)據(jù)庫比較熟悉。

HTML5中的數(shù)據(jù)庫操作比較簡單,主要有如下兩個(gè)函數(shù):

1、通過openDatabase方法創(chuàng)建一個(gè)訪問數(shù)據(jù)庫的對象

代碼如下:

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

該方法有四個(gè)參數(shù),作用分別為:

databasename:數(shù)據(jù)庫名;

version:數(shù)據(jù)庫版本號,可不填;

description:數(shù)據(jù)庫描述;

size:給數(shù)據(jù)庫分配的空間大?。?/P>

2、使用第一步創(chuàng)建的數(shù)據(jù)庫訪問對象(如db)執(zhí)行transaction方法,用來執(zhí)行事務(wù)處理

代碼如下:

db.transaction(function(tx)){

//執(zhí)行訪問數(shù)據(jù)庫的語句

});

transaction方法使用一個(gè)回調(diào)函數(shù)作為參數(shù),在這個(gè)函數(shù)中,執(zhí)行訪問數(shù)據(jù)庫的具體操作;

3、通過executeSql方法執(zhí)行查詢

代碼如下:

tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

executeSql方法有四個(gè)參數(shù),作用分別如下:

sqlQuery:需要具體執(zhí)行的sql語句,可以是create、select、update、delete;

[value1,value2..]:sql語句中所有使用到的參數(shù)的數(shù)組,在executeSql方法中,將sql語句中所要使用的參數(shù)先用“?”代替,然后依次將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中;

dataHandler:執(zhí)行成功是調(diào)用的回調(diào)函數(shù),通過該函數(shù)可以獲得查詢結(jié)果集;

errorHandler:執(zhí)行失敗時(shí)調(diào)用的回調(diào)函數(shù);

本文通過HTML5的數(shù)據(jù)庫支持,重新實(shí)現(xiàn)一遍上篇文章中的通訊錄管理,待實(shí)現(xiàn)功能如下:

可創(chuàng)建聯(lián)系人并保存到數(shù)據(jù)庫中,聯(lián)系人字段包括:姓名、手機(jī)號碼、公司、創(chuàng)建時(shí)間;

列出當(dāng)前已保存的所有聯(lián)系人信息;

可刪除特定聯(lián)系人信息;

同樣,先準(zhǔn)備一個(gè)HTML頁面,如下:

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<title>HTML5本地存儲(chǔ)之本地?cái)?shù)據(jù)庫篇</title>

<style>

.addDiv{

border: 2px dashed #ccc;

width:400px;

text-align:center;

}

</style>

</head>

<body onload="loadAll()">

<div class="addDiv">

<label for="user_name">姓名:</label>

<input type="text" id="user_name" name="user_name" class="text"/>

<br/>

<label for="mobilephone">手機(jī):</label>

<input type="text" id="mobilephone" name="mobilephone"/>

<br/>

<label for="mobilephone">公司:</label>

<input type="text" id="company" name="company"/>

<br/>

<input type="button" onclick="save()" value="新增記錄"/>

</div>

<br/>

<div id="list">

</div>

</body>

</html>

要實(shí)現(xiàn)創(chuàng)建新聯(lián)系人并存入數(shù)據(jù)庫功能,需要如下簡單的JS代碼:

代碼如下:

//打開數(shù)據(jù)庫

var db = openDatabase('contactdb','','local database demo',204800);

//保存數(shù)據(jù)

function save(){

var user_name = document.getElementById("user_name").value;

var mobilephone = document.getElementById("mobilephone").value;

var company = document.getElementById("company").value;

//創(chuàng)建時(shí)間

var time = new Date().getTime();

db.transaction(function(tx){

tx.executeSql('insert into contact values(?,?,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);

});

}

//sql語句執(zhí)行成功后執(zhí)行的回調(diào)函數(shù)

function onSuccess(tx,rs){

alert("操作成功");

loadAll();

}

//sql語句執(zhí)行失敗后執(zhí)行的回調(diào)函數(shù)

function onError(tx,error){

alert("操作失敗,失敗信息:"+ error.message);

}

要展現(xiàn)當(dāng)前所有已保存的聯(lián)系人列表,可通過如下JS代碼實(shí)現(xiàn):

代碼如下:

//將所有存儲(chǔ)在sqlLite數(shù)據(jù)庫中的聯(lián)系人全部取出來

function loadAll(){

var list = document.getElementById("list");

db.transaction(function(tx){

//如果數(shù)據(jù)表不存在,則創(chuàng)建數(shù)據(jù)表

tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);

//查詢所有聯(lián)系人記錄

tx.executeSql('select * from contact',[],function(tx,rs){

if(rs.rows.length>0){

var result = "<table>";

result += "<tr><th>序號</th><th>姓名</th><th>手機(jī)</th><th>公司</th><th>添加時(shí)間</th><th>操作</th></tr>";

for(var i=0;i<rs.rows.length;i++){

var row = rs.rows.item(i);

//轉(zhuǎn)換時(shí)間,并格式化輸出

var time = new Date();

time.setTime(row.createtime);

var timeStr = time.format("yyyy-MM-dd hh:mm:ss");

//拼裝一個(gè)表格的行節(jié)點(diǎn)

result += "<tr><td>"+(i+1)+"</td><td>"+row.name+"</td><td>"+row.phone+"</td><td>"+row.company+"</td><td>"+timeStr+"</td><td><input type='button' value='刪除' onclick='del("+row.phone+")'/></td></tr>";

}

list.innerHTML = result;

}else{

list.innerHTML = "目前數(shù)據(jù)為空,趕緊開始加入聯(lián)系人吧";

}

});

});

}

其中,涉及到格式化時(shí)間的format函數(shù),可參考如下JS實(shí)現(xiàn):

代碼如下:

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;

}

最后,界面實(shí)現(xiàn)效果如下:

要實(shí)現(xiàn)具體某個(gè)聯(lián)系人,需執(zhí)行如下JS代碼:

代碼如下:

//刪除聯(lián)系人信息

function del(phone){

db.transaction(function(tx){

//注意這里需要顯示的將傳入的參數(shù)phone轉(zhuǎn)變?yōu)樽址愋?/P>

tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError);

});

}

如上截圖中的表格樣式,可參考如下CSS代碼:

代碼如下:

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;

}

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:HTML5本地存儲(chǔ)之Database Storage應(yīng)用介紹
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)