HTML5 튜토리얼 html 5 로컬 데이터베이스(웹 SQL 데이터베이스)_html5 튜토리얼 기술

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", "Student Table", 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 stu가 존재합니다(ID REAL UNIQUE, 이름 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단계: 추가, 삭제, 수정 확인

1) 데이터 추가:

코드 복사

코드는 다음과 같습니다.

this.insert = function () {
dataBase.transaction(function ( tx) {
tx.executeSql(
"stu(id, 이름) 값(?, ?)에 삽입",
[id, 'Xu Mingxiang'],
함수() { 경고 ('데이터가 성공적으로 추가되었습니다' ); },
function (tx, error) { Alert('데이터 추가 실패: ' error.message)
});

2) 데이터 조회

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

this .query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { / /성공적인 실행을 위한 콜백 함수
//여기서 결과로 하고 싶은 일을 하세요.....
},
function (tx, error) {
Alert('쿼리 실패: ' error.message);
} );
});
}



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

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

코드 복사

코드는 다음과 같습니다.

인터페이스 SQLResultSet {
읽기 전용 속성 긴 insertId;
읽기 전용 속성 긴 행Affected;
읽기 전용 속성 SQLResultSetRowList 행;
};

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

3) 데이터 업데이트

코드 복사

코드는 다음과 같습니다.

this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? 여기서 id= ?",
[이름, id],
함수(tx, 결과) {
},
함수(tx, 오류) {
Alert('업데이트 실패: ' error.message );
});
});
}

4) 데이터 삭제

코드 복사

코드는 다음과 같습니다.

this.del = function(id) {
dataBase.transaction(function(tx ) {
tx .executeSql(
"id= ?인 stu에서 삭제",
[id],
함수(tx, 결과) {
},
함수(tx , 오류) {
경고('삭제 실패: ' error.message);
});
});
}

5) 데이터 테이블 삭제

코드 복사

코드는 다음과 같습니다

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

web sql 데이터베이스가 추가되었습니다. 데모를 삭제하고 수정하세요. 다운로드하려면 클릭하세요.