이전 기사 "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 페이지를 준비합니다. :
코드 복사 코드는 다음과 같습니다.
; HTML5 로컬 저장소 로컬 데이터베이스 기사
.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) "
" row.name "
" row.phone "
" 행 .company "< ;/td>
" timeStr "
< /td>
"; } 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) ; }) }
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
