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

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

HTML5의 웹 SQL 데이터베이스(html5 로컬 데이터베이스)는 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단계: 추가, 삭제, 수정 및 확인

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 SQLResultSetRowList rows;
};

가장 중요한 속성인 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');
});
}