이전 기사 "HTML5 Local Storage : Web Storage"에서 LocalStorage를 사용하여 로컬 스토리지를 구현하는 방법을 간략하게 소개합니다. 실제로 HTML5는 SessionStorage 및 LocalStorage 외에도 로컬 데이터베이스를 통해 로컬 데이터 저장을 지원합니다. HTML5는 SQLLITE와 같은 파일 형 데이터베이스를 사용하며, 이는 대부분 임베디드 장치에 집중되어 있습니다. iOS/Android 개발에 익숙한 학생들은 Sqllite 데이터베이스에 익숙해야합니다.
HTML5의 데이터베이스 작업은 두 가지 주요 기능으로 비교적 간단합니다.
1. OpenDatabase 메소드를 통해 데이터베이스에 액세스 할 객체 작성var db = opendatabase (databaseName, 버전, 설명, 크기)
이 방법에는 네 가지 매개 변수가 있으며 그 기능은 다음과 같습니다.
DatabaseName : 데이터베이스 이름;
버전 : 데이터베이스 버전 번호, 충전 없음;
설명 : 데이터베이스 설명;
크기 : 데이터베이스에 할당 된 공간의 크기;
2. 트랜잭션 처리를 수행하기 위해 트랜잭션 메소드를 실행하기 위해 첫 번째 단계에서 생성 된 데이터베이스 액세스 개체 (예 : DB)를 사용하십시오.db.Transaction (function (tx)) {
// 데이터베이스에 액세스하려면 문을 실행합니다
});
트랜잭션 메소드는 콜백 함수를 매개 변수로 사용하며 데이터베이스에 액세스하는 특정 작업이 수행됩니다.
3. ExecutesQL 메소드를 통해 쿼리를 실행하십시오tx.executesql (sqlquery, [value1, value2 ..], Datahandler, ErrorHandler)
executesQL 메소드에는 네 가지 매개 변수가 있으며 그 함수는 다음과 같습니다.
SQLQUERY : 구체적으로 실행 해야하는 SQL 문은 작성, 선택, 업데이트 및 삭제 일 수 있습니다.
[value1, value2 ..] : SQL 문에 사용 된 모든 매개 변수의 배열. ExecutesQL 메소드에서 SQL 문에 사용될 매개 변수가 대체됩니까? 먼저,이 파라미터는 배열로 구성되어 두 번째 매개 변수에 배치됩니다.
Datahandler : 쿼리 결과 세트를 얻을 수있는 성공적으로 호출되는 콜백 함수;
ErrorHandler : 실행이 실패 할 때 호출 된 콜백 함수;
이 기사는 HTML5 데이터베이스 지원을 사용하여 이전 기사의 주소록 관리를 다시 구현합니다. 구현할 기능은 다음과 같습니다.
연락처는 데이터베이스에 생성 및 저장 될 수 있습니다. 연락처 필드는 다음과 같습니다. 이름, 휴대폰 번호, 회사, 생성 시간;
현재 저장된 모든 연락처 정보를 나열하십시오.
특정 연락처 정보를 삭제할 수 있습니다.
마찬가지로 다음과 같이 먼저 HTML 페이지를 준비하십시오 .<! doctype html>
<html>
<헤드>
<meta charset = "utf-8"/>
<title> HTML5 로컬 스토리지 로컬 데이터베이스 </title>
<스타일>
.adddiv {
국경 : 2px 점선 #CCC;
너비 : 400px;
텍스트 정렬 : 센터;
}
</스타일>
</head>
<body onload = "loadall ()">
<div>
<label for = "user_name"> 이름 : </label>
<입력 유형 = "text"id = "user_name"name = "user_name"/>
<br/>
<label for = "mobilephone"> 휴대 전화 : </label>
<입력 유형 = "text"id = "mobilephone"name = "mobilephone"/>
<br/>
<label for = "mobilephone"> 회사 : </label>
<입력 유형 = "text"id = "Company"name = "Company"/>
<br/>
<input type = "button"onclick = "save ()"value = "레코드 추가"/>
</div>
<br/>
<div id = "List">
</div>
</body>
</html>
인터페이스는 다음과 같이 표시됩니다.
새 연락처를 작성하고 데이터베이스에 저장하는 기능을 구현하려면 다음의 간단한 JS 코드가 필요합니다.
// 데이터베이스를 엽니 다
var db = opendatabase ( 'contactdb', '', 'local database demo', 204800);
// 데이터 저장
함수 save () {
var user_name = document.getElementById ( "user_name"). 값;
var mobilephone = document.getElementById ( "mobilephone"). 값;
var company = document.getElementById ( "Company"). 값;
// 생성 시간
var time = new date (). gettime ();
db.Transaction (function (tx) {
tx.executesql ( '접점 값 (?,?,?,?)', [user_name, mobilephone, company, time], onsuccess, onerror);
});
}
// SQL 문이 성공적으로 실행 된 후 실행 된 콜백 함수
함수 onsuccess (tx, rs) {
경고 ( "작동 성공");
loadall ();
}
// SQL 문이 실패한 후 실행 된 콜백 함수
기능 onerror (tx, error) {
ALERT ( "작동 실패, 실패한 메시지 :"+ error.message);
}
현재 저장된 모든 연락처 목록을 표시하려면 다음 JS 코드를 사용할 수 있습니다.
// sqllite 데이터베이스에 저장된 모든 연락처를 검색합니다
함수 loadall () {
var list = document.getElementById ( "List");
db.Transaction (function (tx) {
// 데이터 테이블이 존재하지 않으면 데이터 테이블을 만듭니다.
tx.executesql ( ''테이블 작성 테이블 작성 (이름 문자, 전화 문자, 회사 텍스트, CreateTime Integer) ', []);
// 모든 연락처 레코드를 확인하십시오
tx.executesql ( 'select * from contact', [], function (tx, rs) {
if (rs.rows.length> 0) {
var result = "<pable>";
결과 += "<tr> <th> 일련 번호 </th> <th> name </th> <th> mobile </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 = 새 날짜 ();
time.settime (row.createTime);
var timest = time.format ( "yyyy-mm-dd hh : mm : ss");
// 테이블의 행 노드를 조립합니다
결과+= "<tr> <td>"+(i+1)+"</td> <td>"+row.name+"</td> <td>"+row.phone+"</td> <td>"+row.company+"</td> <td>"+timest+"<td> <input type = 'value ='delete ' onclick = 'del ( "+row.phone+")'/> </td> </tr> ";
}
list.innerhtml = 결과;
}또 다른{
list.innerhtml = "현재 데이터가 비어 있고 서두르고 연락처 추가를 시작합니다";
}
});
});
}
그중에서도 형식 시간과 관련된 형식 기능은 다음 JS 구현이라고 할 수 있습니다 .date.prototype.format = function (형식)
{
var o = {
"m+": this.getmonth ()+1, // 월
"d+": this.getDate (), // day
"H+": this.gethours (), // 시간
"m+": this.getMinutes (), // 분
"s+": this.getSeconds (), // 두 번째
"Q+": Math.floor ((this.getMonth ()+3)/3), // 쿼터
"S": this.getMilliseconds () // millisecond
}
if (/(y+)/. test (format)) format = format.replace (regexp. $ 1,
(this.getlyear ()+""). 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? 좋아요] :
( "00"+ o [k]). substr (( ""+ o [k]). 길이);
반환 형식;
}
마지막으로 인터페이스 구현 효과는 다음과 같습니다.
특정 연락처를 구현하려면 다음 JS 코드를 실행해야합니다 .// 연락처 정보를 삭제합니다
기능 델 (전화) {
db.Transaction (function (tx) {
// 전화로 전달 된 매개 변수는 여기에 표시해야합니다.
tx.executesql ( 'phone =?', [string (phone)], onsuccess, onerror);
});
}
위의 스크린 샷의 테이블 스타일에서와 같이 다음 CSS 코드를 참조 할 수 있습니다 .th {
글꼴 : Bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
색상 : #4F6B72;
테두리 오른쪽 : 1px 솔리드 #C1DAD7;
국경-바닥 : 1px 고체 #c1dad7;
테두리 : 1px 고체 #c1dad7;
문자 스페이스 : 2px;
텍스트 변환 : 대문자;
텍스트 정렬 : 왼쪽;
패딩 : 6px 6px 6px 12px;
}
TD {
경계 오른쪽 : 1px Solid #C9DAD7;
국경-바닥 : 1px 고체 #c9dad7;
배경 : #ffff;
패딩 : 6px 6px 6px 12px;
색상 : #4F6B72;
}