로컬 데이터베이스는 HTML5의 새로운 기능입니까?-프런트엔드 Q&A-php.cn

로컬 데이터베이스는 HTML5의 새로운 기능입니까?

青灯夜游

풀어 주다： 2022-01-23 16:41:18

원래의

1574명이 탐색했습니다.

로컬 데이터베이스는 html5의 새로운 기능입니다. Html5는 브라우저 측 데이터베이스 지원을 제공하여 개발자가 JS API를 통해 브라우저 측에서 직접 로컬 데이터베이스를 생성할 수 있도록 하고, 표준 SQL CRUD 작업을 지원하여 오프라인 웹 애플리케이션이 구조화된 데이터를 보다 편리하게 저장할 수 있도록 해줍니다.

로컬 데이터베이스는 HTML5의 새로운 기능입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

Html5는 이미 강력한 localStorage와 sessionStorage를 제공하지만 둘 다 단순한 데이터 구조를 저장하기 위한 데이터만 제공할 수 있으며 복잡한 웹 애플리케이션 데이터에는 무력합니다. 놀라운 점은 Html5가 브라우저 측에서 데이터베이스 지원을 제공하여 JS API를 통해 직접 브라우저 측에서 로컬 데이터베이스를 생성할 수 있게 하고 표준 SQL CRUD 작업을 지원하여 오프라인 웹 애플리케이션이 구조화된 데이터를 보다 편리하게 저장할 수 있게 해준다는 것입니다. . 다음으로 관련 API와 로컬 데이터의 사용법을 소개하겠습니다.

로컬 데이터베이스를 운영하는 가장 기본적인 단계는 다음과 같습니다.

1단계: openDatabase 메서드: 데이터베이스에 액세스하기 위한 개체를 만듭니다.
두 번째 단계: 첫 번째 단계에서 생성한 데이터베이스 액세스 객체를 사용하여 트랜잭션 메서드를 실행합니다. 이 메서드를 통해 트랜잭션을 성공적으로 시작하기 위한 이벤트 응답 메서드를 설정할 수 있습니다.
3단계: 통과 ExecutionSql 메서드는 쿼리를 실행합니다. 물론 쿼리는 CRUD일 수 있습니다.

다음으로 해당 메소드의 매개변수와 사용법을 소개하겠습니다.

(1) openDatabase 메소드:

//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });

로그인 후 복사

openDatabase 메소드는 기존 데이터베이스를 엽니다. 데이터베이스가 존재하지 않으면 데이터베이스를 생성할 수도 있습니다. 여러 매개변수의 의미는 다음과 같습니다.

1, 데이터베이스 이름.
2. 현재는 1.0이면 충분합니다.
3.
4. 할당된 데이터베이스의 크기를 설정합니다(단위는 kb).
5, 콜백 함수(생략 가능).
처음 호출 시 데이터베이스를 생성한 후 연결을 설정하세요.

(2) db.transaction 메소드는 콜백 함수를 설정할 수 있습니다. 이 함수는 우리가 시작한 트랜잭션의 객체인 매개변수를 받아들일 수 있습니다. 그런 다음 이 개체를 통해 SQL 스크립트를 실행할 수 있으며 이는 다음 단계와 결합될 수 있습니다.

(3) ExecutionSql 메소드를 통해 쿼리를 실행합니다.

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

로그인 후 복사

매개변수 설명:

qlQuery: 생성, 선택, 업데이트, 삭제 등 구체적으로 실행해야 하는 SQL 문
value1, value2..]: SQL에 사용되는 모든 매개변수의 배열; 구문, 실행Sql 메서드에서 먼저 s> 문에 사용할 매개 변수를 "?"로 바꾼 다음 이 매개 변수를 두 번째 매개 변수의 배열에 넣습니다.
ataHandler: 성공적인 실행은 콜백 함수를 호출하는 것입니다.
4, errorHandler: 실행 실패 시 호출되는 콜백 함수

다음은 포괄적인 예입니다.

<head>
 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function initDatabase() {
            var db = getCurrentDb();//初始化数据库
            if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
            db.transaction(function (trans) {//启动一个事务，并设置回调函数
                //执行创建表的Sql脚本
                trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
                }, function (trans, message) {//消息的回调函数alert(message);});
            }, function (trans, result) {
            }, function (trans, message) {
            });
        }
        $(function () {//页面加载完成后绑定页面按钮的点击事件
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtTitle = $("#txtTitle").val();
                var txtWords = $("#txtWords").val();
                var db = getCurrentDb();
                //执行sql脚本，插入数据
                db.transaction(function (trans) {
                    trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                    }, function (ts, message) {
                        alert(message);
                    });
                });
                showAllTheData();
            });
        });
        function getCurrentDb() {
            //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
            //如果数据库不存在那么创建之
            var db = openDatabase("myDb", "1.0", "it&#39;s to save demo data!", 1024 * 1024); ;
            return db;
        }
        //显示所有数据库中的数据到页面上去
        function showAllTheData() {
            $("#tblData").empty();
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql("select * from Demo ", [], function (ts, data) {
                    if (data) {
                        for (var i = 0; i < data.rows.length; i++) {
                            appendDataToTable(data.rows.item(i));//获取某行数据的json对象
                        }
                    }
                }, function (ts, message) {alert(message);var tst = message;});
            });
        }
        function appendDataToTable(data) {//将数据展示到表格里面
            //uName,title,words
            var txtName = data.uName;
            var txtTitle = data.title;
            var words = data.words;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + words + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }
    </script>
</head>
    <body>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>
            </tr>
               <tr>
                <td>标题：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>
            </tr>
        </table>
        <input type="button" value="保存" id="btnSave"/>
        <hr/>
        <input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
        <table id="tblData">
        </table>
    </body>
</html>

로그인 후 복사

실행 효과는 그림과 같습니다. :