HTML5 Web ストレージ - Web SQL サンプルコード分析-H5 チュートリアル-php.cn

HTML5 Web ストレージ - Web SQL サンプルコード分析

黄舟

リリース： 2017-03-16 16:16:10

オリジナル

1566 人が閲覧しました

Web SQLとは何ですか?

私たちはアプリケーションで大量の構造化データを扱うことがよくありますが、HTML5はWeb SQLデータベースの概念を導入しました。これにより、アプリケーションは非同期Javascript インターフェースを介してSQLliteデータベースにアクセスできるようになります。。ただし、現在 Web SQL は HTML5 仕様には含まれていませんが、Safari、Chrome、および Oprea ブラウザーは別の仕様で Web SQL をサポートしています。

3 つのコアメソッド

Web SQL Database 仕様で定義されている 3 つのコアメソッド:

openDatabase: このメソッドは、既存のデータベースまたは新しいデータベースを使用して、データベースを作成オブジェクト
transaction: このメソッドを使用すると、状況に応じてトランザクションのコミットまたはロールバックを制御できます
executeSql: このメソッドは SQL の実行に使用されます query

openDatabase

Syntax: var db = openDatabase(名前、バージョン、表示名前、推定サイズ、作成すべて戻る); 名前: データベース名
version: データベースのバージョン番号
displayName: データベースの説明
estimatedSize: データベースに保存されたデータのサイズ (バイト単位)
CreationCallback:
コールバック関数、オプションの

transaction

transactionメソッドは、ステートメントの実行に失敗した場合、トランザクション全体がロールバックされます。このメソッドには、トランザクションコンテンツを含むメソッド、成功時のコールバック関数 (オプション)、および失敗時のコールバック関数 (オプション) の 3 つのパラメータがあります。

db.transaction(function (context) {
           context.executeSql(&#39;CREATE TABLE IF NOT EXISTS testTable (id unique, name)&#39;);
           context.executeSql(&#39;INSERT INTO testTable (id, name) VALUES (0, "Byron")&#39;);
           context.executeSql(&#39;INSERT INTO testTable (id, name) VALUES (1, "Casper")&#39;);
           context.executeSql(&#39;INSERT INTO testTable (id, name) VALUES (2, "Frank")&#39;);
         });

ログイン後にコピー

この例では、テーブル testTable を作成し、そのテーブルに 3 つのデータを挿入します。4 つの実行ステートメントのいずれかでエラーが発生した場合、トランザクション全体がロールバックされます。

executeSql

executeSql メソッドは、SQL ステートメントを実行して結果を返すために使用されます。このメソッドには 4 つのパラメーターがあります。 - クエリ

文字列
- クエリ文字列内の疑問符を置換するために使用されるパラメータ - 実行成功コールバック関数 (オプション)
- 実行失敗コールバック関数 (オプション)
文法:
trans.executeSql(sql,[],function(){trans,data},function(trans,msg){});

例

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>web SQL demo</title>
    <script src="jquery-3.0.0.min.js"></script>
    <script>
        //创建或连接数据库
        function getDb()
        {
            var db = openDatabase("data.db","1.0","demo",1024*1024);
            return db;
        }
        //初始化数据库
        function initDb()
        {
            var db = getDb();
            if(db == null)
            {
                alert("你的浏览器不支持web SQL");
                return null;
            }
            db.transaction(function(trans){
                trans.executeSql("create table if not exists demo(name text null,title text null,content text null)",[],function(trans,result){},
                function(trans,error){alert(error)})
            });
        }

        $(function(){
                var db = getDb();
                initDb();
                $("#btnSave").click(function(){
                    var name = $("#name").val();
                    var title = $("#title").val();
                    var content = $("#content").val();
                    //执行sql脚本来插入数据
                    db.transaction(function(trans){
                        trans.executeSql("insert into demo(name,title,content)values(?,?,?)",
                                        [name,title,content],
                                        function(trans,success){},
                                        function(trans,error){alert(error);}
                                        );
                    showAll();
                    });

                });             
            })

        //显示所有数据
        function showAll()
        {
            $("#tblData").empty();
            var db = getDb();
            db.transaction(function(trans){
                trans.executeSql("select * from demo",[],function(trans,data){
                    //获取查询到的数据
                    if(data)
                    {
                        for(var i=0;i<data.rows.length;i++)
                        {
                            //获取一行json数据，将数据拼接成表格
                            appendDataToTable(data.rows.item(i));
                        }
                    }
                },function(trans,error){alert(error);});
            });
        }

        function appendDataToTable(data)
        {
            var name = data.name;
            var title = data.title;
            var content = data.content;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+name+"</td>";
            strHtml += "<td>"+title+"</td>";
            strHtml += "<td>"+content+"</td>";
            strHtml += "</tr>";

            $("#tblData").append(strHtml);
        }
    </script>
</head>
<body>
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="name" id="name" required/></td>
        </tr>
        <tr>
            <td>标题</td>
            <td><input type="text" name="title" id="title" required/></td>
        </tr>
        <tr>
            <td>留言</td>
            <td><input type="text" name="content" id="content" required/></td>
        </tr>
    </table>
    <input type="button" value="保存" id="btnSave"/>
    <br/>
    <input type="button" value="展示所有数据" onclick="showAll();"/>
    <table id="tblData"></table>
</body>
</html>

ログイン後にコピー