HTML5-Web SQL Database
그 중에서 매우 중요 한 기능 은 바로 데이터 뱅 크 의 로 컬 저장 기능 이다.HTML 5 에 SQL 언어 로 접근 할 수 있 는 데이터베이스 가 내장 되 어 있 습 니 다.HTML 4 에 서 는 데이터 베 이 스 를 서버 쪽 에 만 두 고 서버 를 통 해 만 데이터 베 이 스 를 방문 할 수 있 지만 HTML 5 에 서 는 로 컬 파일 을 방문 하 는 것 처럼 내 장 된 데이터 베 이 스 를 쉽게 직접 방문 할 수 있다.현재 서버 에 저장 할 필요 가 없 는 'SQLite' 라 고 불 리 는 파일 형 SQL 데이터 베 이 스 는 이미 광범 위 하 게 이용 되 었 기 때문에 HTML 5 에서 도 이러한 데이터 베 이 스 를 로 컬 데이터 베이스 로 사용 하고 있다.
세 가지 핵심 방법
1. openDatabase: 이 방법 은 기 존 데이터 베 이 스 를 사용 하거나 새 데이터 베 이 스 를 만들어 데이터베이스 대상 을 만 듭 니 다.
2. transaction: 이 방법 은 상황 에 따라 업무 제출 이나 스크롤 백 을 제어 할 수 있 습 니 다.
3. execute Sql: 이 방법 은 실제 SQL 조 회 를 수행 하 는 데 사 용 됩 니 다.
데이터베이스 열기
openDatabase 방법 은 이미 존재 하 는 데이터 베 이 스 를 엽 니 다. 데이터 베이스 가 존재 하지 않 으 면 데이터 베 이 스 를 만 들 수 있 습 니 다. 데이터 베 이 스 를 만 들 고 열 수 있 는 문법 은 다음 과 같 습 니 다.
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);다섯 개의 인자:
실행 조회
조 회 를 실행 하려 면 database. transaction () 함 수 를 사용 합 니 다. 하나의 인자 만 필요 합 니 다. 다음은 진실 한 조회 문 입 니 다.
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});위의 조 회 는 데이터베이스 에 LOGS 표를 만 들 것 입 니 다.
삽입 조작
표 에 새 기록 을 삽입 하기 위해 서 우 리 는 위의 검색 어 에 간단 한 SQL 조 회 를 추 가 했 습 니 다. 수 정 된 문 구 는 다음 과 같 습 니 다.
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});신기록 을 삽입 할 때 우 리 는 동적 값 을 전달 할 수 있다. 예 를 들 어:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log];
});여기 eid 와 elog 는 외부 변수
읽 기 동작
존재 하 는 기록 을 읽 으 려 면 리 셋 캡 처 결 과 를 사용 합 니 다. 코드 는 다음 과 같 습 니 다.
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});완전한 예
마지막 으로 전체 HTML 5 문서 에서 앞에서 말 한 내용 을 보 여 주 는 동시에 브 라 우 저 를 사용 하여 이 HTML 5 문 서 를 해석 합 니 다.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
msg = '<p>Log message created and row inserted.</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>원문의 출처:
http://baike.baidu.com/link?url=HegPhGCsMxAIaloDG9rr547snIi9apQ7EIZwyfCoMuBb2OomXTM3ZzLB6ESyIcAouZ9IOUPtBDzvZdTUt43bs_
http://www.tutorialspoint.com/html5/html5_web_sql.htm
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
깊이 중첩된 객체를 정확히 일치 검색 - PostgreSQL목차 * 🚀 * 🎯 * 🏁 * 🙏 JSON 객체 예시 따라서 우리의 현재 목표는 "고용주"사용자가 입력한 검색어(이 경우에는 '요리')를 얻고 이 용어와 정확히 일치하는 모든 사용자 프로필을 찾는 것입니다. 즐거운 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
