HTML5 로컬 데이터베이스 인스턴스에 대한 자세한 설명

HTML5(html5 로컬 데이터베이스)의 웹 SQL 데이터베이스는 실제로 매우 매력적입니다. mysql 쿼리와 동일한 쿼리 문을 사용하여 로컬 데이터베이스를 작동할 수 있다는 사실을 알게 되면 이것이 매우 흥미로울 것입니다. 오늘은 HTML 5의 Web SQL Database API인 openDatabase, transaction, ExecuteSql에 대해 알아 보겠습니다. Web SQL Database API는 실제로 HTML5 사양의 일부가 아니라 별도의 사양입니다. API 세트를 통해 클라이언트의 데이터베이스를 조작합니다. Safari, Chrome, Firefox, Opera와 같은 주류 브라우저는 이미 웹 SQL 데이터베이스를 지원합니다. HTML5의 웹 SQL 데이터베이스는 실제로 매우 매력적입니다. mysql 쿼리와 동일한 쿼리 문을 사용하여 로컬 데이터베이스를 작동할 수 있다는 사실을 알게 되면 이것이 매우 흥미로울 것입니다. 오늘은 HTML 5의 Web SQL Database API에 대해 알아 보겠습니다.
다음에서는 데이터베이스 생성 및 열기, 테이블 생성, 데이터 추가, 데이터 업데이트, 데이터 삭제, 테이블 삭제 방법을 하나씩 소개합니다.
먼저 세 가지 핵심 메소드 소개
1. openDatabase: 이 메소드는 기존 데이터베이스를 사용하거나 새 데이터베이스를 생성데이터베이스객체를 생성합니다.
2. 트랜잭션: 이 방법을 사용하면 상황에 따라 트랜잭션 제출 또는 롤백을 제어할 수 있습니다.
3.executeSql: 실제 SQL 쿼리를 실행하는 데 사용되는 메서드입니다.
1단계: 연결 열기 및 데이터베이스 생성

코드는 다음과 같습니다.

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if
 (!dataBase) {
    alert("数据库创建失败！");
} 
else
 {
    alert("数据库创建成功！");
}

기존 데이터베이스를 여는 openDatabase 메소드를 설명합니다. . 데이터베이스가 존재하지 않는 경우 데이터베이스를 생성할 수도 있습니다. 여러 매개변수의 의미는 다음과 같습니다.
1, 데이터베이스 이름.
2. 현재 버전은 1.0 이고 그냥 놔두시면 됩니다.
3. 데이터베이스에 대한 설명입니다.
4. 데이터 크기를 설정합니다.
5, 콜백 함수 (생략 가능).
처음 호출 시 데이터베이스를 생성한 후 연결을 설정하세요.
생성된 데이터베이스는 로컬에 존재하며 경로는
C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_4987입니다.
생성된 것은 sqllite 데이터베이스입니다. SQLiteSpy를 사용하여 파일을 열고 내부 데이터를 볼 수 있습니다. SQLiteSpy는 친환경 소프트웨어입니다. Baidu 또는 공식 SQLiteSpy 다운로드 주소: SQLiteSpy에서 다운로드할 수 있습니다.
2단계: 데이터 테이블 생성

코드는 다음과 같습니다.

this.createTable=function() {  
dataBase.transaction( function(tx) {     
tx.executeSql(        
"create table if not exists stu (id REAL UNIQUE, name TEXT)",         
[],         
function(tx,result){ alert('创建stu表成功'); 
},         
function(tx, error){ alert('创建stu表失败:' + error.message);     
}); 
});
}

executeSql 함수에는 4개의 매개변수가 있으며 그 의미는 다음과 같습니다. :
1) 쿼리를 나타내는 문자열 은 SQL 언어는 SQLite 3.6.19를 사용합니다.
2) 물음표가 있는 쿼리에 문자열 데이터가 삽입됩니다.
3) 성공 시 콜백 함수가 실행됩니다. 두 개의 매개변수인 tx와 실행 결과를 반환합니다.
4) 실패시 실행되는 콜백 함수입니다. tx 및 실패 오류 메시지 라는 두 개의 매개변수를 반환합니다.
3단계: CRUD 수행
1) 데이터 추가:

코드는 다음과 같습니다.

this.insert = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "insert  into  stu (id, name) values(?, ?)",
        [id, '徐明祥'],
        function () { alert('添加数据成功'); },
        function (tx, error) { alert('添加数据失败: ' + error.message); 
        } );
    });

2) 데이터 쿼리

코드는 다음과 같습니다.

this.query = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "select  *  from  stu", [],
         function (tx, result) {  //执行成功的回调函数
             //在这里对result 做你想要做的事情吧...........
            },
         function (tx, error) {
            alert('查询失败: ' + error.message);
         } );
      });
}

설명
위 코드에서 성공적으로 실행된 콜백 함수에는 매개변수 결과가 있습니다.

결과: 쿼리된 데이터 세트. 데이터 유형은 C#의 DataTable과 마찬가지로 SQLResultSet입니다.
SQLResultSet은 다음과 같이 정의됩니다.

코드는 다음과 같습니다.

interface  SQLResultSet {
             readonly  attribute  long  insertId;
             readonly  attribute  long  rowsAffected;
             readonly  attribute  SQLResultSetRow
List
  rows;
             };

가장 중요한 속성—SQLResultSetRowList 유형의 행은 SQLResultSetRowList 유형의 "행"입니다. 데이터 세트.
행에는 길이와 항목이라는 두 가지 속성이 있습니다.
따라서 쿼리 결과의 특정 행과 열 값을 가져옵니다: result.rows[i].item[fieldname].

3) 데이터 업데이트

코드는 다음과 같습니다.

this.update = function (id, name) {   
dataBase.transaction(function (tx) {            
tx.executeSql(        
"update  stu  set  name =  ?  where  id= ?",        
[name, id],         
function (tx, result) {         },        
function (tx, error) {            
alert('更新失败: ' + error.message);        
});   
});
}

4) 데이터 삭제

코드는 다음과 같습니다.

this.del = function (id) {
     dataBase.transaction(function (tx) {
            tx.executeSql(
        "
delete
  from  stu  where  id= ?",
        [id],
         function (tx, result) {
         },
        function (tx, error) {
            alert('删除失败: ' + error.message);
        });
    });
}

5 )데이터 테이블 삭제

코드는 다음과 같습니다.

this.dropTable = function () {    
dataBase.transaction(function (tx) {            
tx.executeSql('drop  table  stu');     
});
}

[관련 권장사항]

1. HTML5 무료 동영상 튜토리얼

2.

타이머 만들기를 위한 H5 코드 데모

3.

여러 이미지 업로드를 완료하는 H5 상세 예시

4.

H5의 커스텀 속성 데이터에 대한 자세한 설명-*

5.

H5 마이크로씬 구현 방법을 가르쳐주세요

위 내용은 HTML5 로컬 데이터베이스 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!