欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5本地存儲之Database Storage應用介紹

  發(fā)布時間：2013-01-06 15:58:55   作者：佚名   我要評論
實際上，除了sessionStorage和localStorage外，HTML5還支持通過本地數據庫進行本地數據存儲，HTML5采用的是"SQLLite"這種文件型數據庫，該數據庫多集中在嵌入式設備上，熟悉IOS/Android開發(fā)的同學，應該對SQLLite數據庫比較熟悉
在上一篇《HTML5本地存儲之Web Storage篇》中，簡單介紹了如何利用localStorage實現本地存儲；實際上，除了sessionStorage和localStorage外，HTML5還支持通過本地數據庫進行本地數據存儲，HTML5采用的是"SQLLite"這種文件型數據庫，該數據庫多集中在嵌入式設備上，熟悉IOS/Android開發(fā)的同學，應該對SQLLite數據庫比較熟悉。
HTML5中的數據庫操作比較簡單，主要有如下兩個函數：
1、通過openDatabase方法創(chuàng)建一個訪問數據庫的對象

復制代碼
代碼如下:

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

該方法有四個參數，作用分別為：
databasename:數據庫名；
version：數據庫版本號，可不填；
description：數據庫描述；
size：給數據庫分配的空間大??；
2、使用第一步創(chuàng)建的數據庫訪問對象（如db）執(zhí)行transaction方法，用來執(zhí)行事務處理

復制代碼
代碼如下:

db.transaction(function(tx)){
//執(zhí)行訪問數據庫的語句
});

transaction方法使用一個回調函數作為參數，在這個函數中，執(zhí)行訪問數據庫的具體操作；
3、通過executeSql方法執(zhí)行查詢

復制代碼
代碼如下:

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

executeSql方法有四個參數，作用分別如下：
sqlQuery：需要具體執(zhí)行的sql語句，可以是create、select、update、delete；
[value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將sql語句中所要使用的參數先用“?”代替，然后依次將這些參數組成數組放在第二個參數中；
dataHandler：執(zhí)行成功是調用的回調函數，通過該函數可以獲得查詢結果集；
errorHandler：執(zhí)行失敗時調用的回調函數；
本文通過HTML5的數據庫支持，重新實現一遍上篇文章中的通訊錄管理，待實現功能如下：
可創(chuàng)建聯系人并保存到數據庫中，聯系人字段包括：姓名、手機號碼、公司、創(chuàng)建時間；
列出當前已保存的所有聯系人信息；
可刪除特定聯系人信息；
同樣，先準備一個HTML頁面，如下：

復制代碼
代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5本地存儲之本地數據庫篇</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">手機：</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>

界面展現如下：

要實現創(chuàng)建新聯系人并存入數據庫功能，需要如下簡單的JS代碼：

復制代碼
代碼如下:

//打開數據庫
var db = openDatabase('contactdb','','local database demo',204800);
//保存數據
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value;
//創(chuàng)建時間
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í)行的回調函數
function onSuccess(tx,rs){
alert("操作成功");
loadAll();
}
//sql語句執(zhí)行失敗后執(zhí)行的回調函數
function onError(tx,error){
alert("操作失敗，失敗信息："+ error.message);
}

要展現當前所有已保存的聯系人列表，可通過如下JS代碼實現：

復制代碼
代碼如下:

//將所有存儲在sqlLite數據庫中的聯系人全部取出來
function loadAll(){
var list = document.getElementById("list");
db.transaction(function(tx){
//如果數據表不存在，則創(chuàng)建數據表
tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);
//查詢所有聯系人記錄
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = "<table>";
result += "<tr><th>序號</th><th>姓名</th><th>手機</th><th>公司</th><th>添加時間</th><th>操作</th></tr>";
for(var i=0;i<rs.rows.length;i++){
var row = rs.rows.item(i);
//轉換時間，并格式化輸出
var time = new Date();
time.setTime(row.createtime);
var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
//拼裝一個表格的行節(jié)點
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 = "目前數據為空，趕緊開始加入聯系人吧";
}
});
});
}

其中，涉及到格式化時間的format函數，可參考如下JS實現：

復制代碼
代碼如下:

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;
}

最后，界面實現效果如下：
 
要實現具體某個聯系人，需執(zhí)行如下JS代碼：

復制代碼
代碼如下:

//刪除聯系人信息
function del(phone){
db.transaction(function(tx){
//注意這里需要顯示的將傳入的參數phone轉變?yōu)樽址愋?
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;
}

相關文章

  • Html5 web本地存儲實例詳解

    這篇文章主要介紹了Html5 web本地存儲實例詳解的相關資料,需要的朋友可以參考下
    2016-07-28

  • HTML5本地存儲之Web Storage詳解

    這篇文章主要為大家詳細介紹了HTML5本地存儲之Web Storage的相關資料，Web Storage如何用JSON存儲多個數據，感興趣的小伙伴們可以參考一下
    2016-07-04

  • HTML5 本地存儲 LocalStorage詳解

    下面小編就為大家?guī)硪黄狧TML5 本地存儲 LocalStorage詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-24

  • 探索HTML5本地存儲功能運用技巧

    這篇文章主要介紹了HTML5本地存儲功能運用技巧，通過實例可以加深對HTML5本地存儲的理解，熟練應用，感興趣的小伙伴們可以參考一下
    2016-03-02

  • 談一談HTML5本地存儲技術

    這篇文章主要和大家聊一聊HTML5本地存儲技術，本地緩存是HTML5出現的新技術，所以我們更應該掌握本地存儲技術，感興趣的小伙伴們可以參考一下
    2016-03-02

  • HTML5本地存儲之Web Storage應用介紹

    Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數據，類似HTML4的cookie，但可實現功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方
    2013-01-06

  • html5 web本地存儲將取代我們的cookie

    在html5中為我們提供了一種本地緩存機制，它將取代我們的cookie，并且它是不會隨瀏覽器發(fā)會我們的服務器端的html5中緩存主要有l(wèi)ocalStorage，和sessionStorage,具體請祥看
    2012-12-26

  • HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案

    localStorage（本地存儲）,可以長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據都可以使用,sessionStorage（會話存儲），只有在瀏覽器被關閉之前使用，創(chuàng)建另
    2012-12-09

  • HTML5 本地存儲和內容按需加載的思路和方法

    本文將著重介紹HTML5本地存儲和內容按需加載的思路和方法，以及HTML5視頻技術的效果。LOL官網采用的減少加載量的方法，在首頁上為用戶節(jié)省了至少600K的下載量，同時大大減
    2011-04-07

  • html5本地存儲 localStorage操作使用詳解

    這篇文章主要介紹了html5本地存儲 localStorage操作使用詳解的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-09-20

最新評論