HTML5 로컬 저장소_html5 튜토리얼 기술의 데이터베이스 저장소 응용 프로그램 소개

이전 기사 "HTML5 로컬 저장소의 웹 저장소"에서는 localStorage를 사용하여 로컬 저장소를 구현하는 방법을 간략하게 소개했습니다. 실제로 HTML5는 sessionStorage 및 localStorage 외에도 로컬 데이터베이스를 통한 로컬 데이터 저장소도 지원합니다. , HTML5는 주로 임베디드 장치에 집중된 "SQLLite"와 같은 파일 형식 데이터베이스를 사용합니다. IOS/Android 개발에 익숙한 학생들은 SQLLite 데이터베이스에 익숙해야 합니다.
HTML5의 데이터베이스 작업은 비교적 간단하며 주로 다음 두 가지 기능을 포함합니다.
1. openDatabase 메서드를 통해 데이터베이스에 액세스하는 개체를 만듭니다.

코드 복사

코드는 다음과 같습니다.

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

이 메소드에는 4개의 매개변수가 있으며 해당 기능은 다음과 같습니다.
데이터베이스 이름: 데이터베이스 이름;
버전: 데이터베이스 버전 번호, 선택 사항
설명: 데이터베이스 설명
공간 데이터베이스 크기에 할당됩니다.
2. 첫 번째 단계에서 생성된 데이터베이스 액세스 개체(예: db)를 사용하여 트랜잭션 처리를 수행합니다.

코드 복사

코드는 다음과 같습니다.

db.transaction(function(tx)){
// 데이터베이스에 접근하기 위한 명령문 실행
} ; >

코드 복사

코드는 다음과 같습니다.

tx.executeSql(sqlQuery,[value1,value2. .], dataHandler, errorHandler) executeSql 메소드에는 4개의 매개변수가 있으며 해당 기능은 다음과 같습니다.

sqlQuery: 구체적으로 실행해야 하는 sql 문(생성, 선택, 업데이트, 삭제 가능)

[value1,value2..]: sql 문에서 사용되는 모든 매개 변수의 배열입니다. sql 문에서 사용할 매개변수를 "?"로 배열한 뒤, 두 번째 매개변수

dataHandler : 실행 성공 시 호출되는 콜백 함수.
errorHandler: 실행 실패 시 호출되는 콜백 함수
이 문서는 HTML5의 데이터베이스에서 지원되며, 이전 문서의 주소록 관리를 다시 구현합니다.

연락처 필드에는 이름, 휴대폰 번호, 회사, 생성 시간이 포함됩니다.
열 현재 저장된 모든 연락처 정보를 삭제할 수 있습니다. ;

마찬가지로 먼저 다음과 같이 HTML 페이지를 준비합니다.
:





코드 복사
코드는 다음과 같습니다.

;

.addDiv{

border: 2px dashed

width:400px; >text-align:center
}


"addDiv">
이름:



휴대폰:

함수에는 다음과 같은 간단한 JS 코드가 필요합니다. 🎜>


코드 복사


코드는 다음과 같습니다.

//데이터베이스 열기
var db = openDatabase('contactdb','','localdatabasedem',204800)
//데이터 저장
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value ;
//생성 시간
var time = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('연락처 값에 삽입(?, ? ,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
})
//SQL 문이 성공적으로 실행된 후 실행되는 콜백 함수
function onSuccess(tx,rs){
alert("작업 성공");
loadAll();
}
//SQL 문 실행 실패 후 실행되는 콜백 함수
function onError(tx ,error){
alert("작업 실패, 실패 메시지: " error.message);
}

현재 저장된 모든 연락처 목록을 표시하려면 다음을 수행하세요. 다음 JS 코드 구현을 사용하십시오.

코드 복사 코드는 다음과 같습니다.

//모든 것을 sqlLite 데이터베이스의 모든 연락처 가져오기
function loadAll(){
var list = document.getElementById("list")
db.transaction(function(tx){
//데이터 테이블이 없으면 데이터 테이블을 생성합니다
tx.executeSql('create table if not presents contact(name text,phone text,company text,createtime INTEGER)',[]);
//모든 연락처 쿼리 개인 레코드
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = "";
result = "휴대전화 회사시간 추가작업";
for(var i=0;ivar row = rs.rows.item(i);
//시간을 변환하고 출력 형식을 지정합니다.
var time = new Date()
time.setTime( row.createtime );
var timeStr = time.format("yyyy-MM-dd hh:mm:ss")
//테이블의 행 노드 조립
result = "" (i 1) "";
}
list.innerHTML = 결과;
}else{
list.innerHTML = "현재 데이터가 비어 있습니다. 연락처 추가를 시작하세요. 빨리";
}
});
});
}


이 중 시간을 포맷팅하는 기능은 다음을 참고하여 구현할 수 있습니다. 다음 JS:

코드 복사 코드는 다음과 같습니다.

Date.prototype.format = 함수(형식)
{
var o = {
"M " : this.getMonth() 1, //월
"d " : this.getDate( ), //일
"h " : this.getHours(), //시간
"m " : this.getMinutes(), //분
"s " : this.getSeconds(), //초
"q " : Math.floor((this.getMonth() 3)/3), //분기
"S" : this.getMilliseconds() //밀리초
}
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))
반환 형식; 🎜>
마지막으로 인터페이스 구현 효과는 다음과 같습니다.

특정 연락처를 구현하려면 다음 JS 코드를 실행해야 합니다
:


코드 복사

코드는 다음과 같습니다. //연락처 삭제

function del (phone){

db.transaction(function(tx) {

//여기에 표시되어야 하는 것은 수신 매개변수 전화를 문자열 유형으로 변환하는 것입니다.
tx.executeSql('delete from contact wherephone=?',[String(phone)],onSuccess,onError) ;
})
}



위 스크린샷의 테이블 스타일은 다음 CSS 코드
를 참조하세요:

코드 복사

代码如下:

번째 {
글꼴: 굵은 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
색상: #4f6b72;
테두리 오른쪽: 1px 단색 #C1DAD7;
테두리 하단: 1px 솔리드 #C1DAD7;
테두리 상단: 1px 솔리드 #C1DAD7;
글자 간격: 2px;
텍스트 변환: 대문자;
텍스트 정렬: 왼쪽;
패딩: 6px 6px 6px 12px;
}
td {
테두리 오른쪽: 1px 솔리드 #C9DAD7;
테두리 하단: 1px 솔리드 #C9DAD7;
배경: #fff;
패딩: 6px 6px 6px 12px;
색상: #4f6b72;
}

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：캔버스 구문의 한계를 극복하고 체인 구문을 지원하게 하세요_html5 튜토리얼 기술다음 기사：캔버스 구문의 한계를 극복하고 체인 구문을 지원하게 하세요_html5 튜토리얼 기술

관련 기사

더보기

• AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성
• HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)
• HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명
• 정규 표현식과 새로운 HTML5 요소
• NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved

일련번호	이름	" row.name "	" row.phone "	" 행 .company "< ;/td>	" timeStr "	< /td>