ローカルデータベースLOGIN

ローカルデータベース

HTML5 はすでに強力な localStorage と sessionStorage を提供していますが、どちらも単純なデータ構造を保存するためのデータしか提供できず、複雑な Web アプリケーション データには無力です。驚くべきことに、HTML5 はブラウザ側のデータベース サポートを提供し、JS API を介してブラウザ側でローカル データベースを直接作成できるようになり、標準の SQL CRUD 操作をサポートして、オフライン Web アプリケーションが構造化されたデータをより便利に保存できるようになりました。次に、関連するAPIとローカルデータの利用方法について紹介します。

ローカル データベースを操作するための最も基本的な手順は次のとおりです:

ステップ 1: openDatabase メソッド: データベースにアクセスするためのオブジェクトを作成します。

2 番目のステップ: 最初のステップで作成したデータベース アクセス オブジェクトを使用して、トランザクション メソッドを実行します。このメソッドを通じて、トランザクションを正常に開始するためのイベント応答メソッドを設定できます。

ステップ 3: パスexecuteSql メソッドはクエリを実行します。もちろん、クエリは CRUD にすることができます。

次に、パラメータと関連メソッドの使用法を紹介します。

1. openDatabase メソッド

//デモ: データベースが存在しない場合は、データベースを作成します

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });

データベースが存在しない場合は、openDatabase メソッドを使用してデータベースを作成することもできます。データベース。いくつかのパラメータの意味は次のとおりです:

  • データベース名。

  • データベースのバージョン番号。現在は 1.0 で十分です。もちろん、入力する必要はありません。

  • データベースの説明。

  • 割り当てられるデータベースのサイズを設定します(単位はkb)。

  • コールバック関数(省略可能)。

初回通話時にデータベースを作成し、接続を確立します。

2. db.transaction メソッド

は、コールバック関数を設定できます。この関数は、開始したトランザクションのオブジェクトであるパラメーターを受け入れることができます。 SQL スクリプトは、このオブジェクトを通じて実行できます。

3.executeSql メソッドはクエリを実行します

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

パラメータの説明:

  • qlQuery: 具体的に実行する必要がある SQL ステートメントは、create、select、update、delete です。

  • [value1, value2..]: SQL ステートメントで使用されるすべてのパラメーターの配列。executeSql メソッドでは、まず s> ステートメントで使用されるパラメーターを「?」に置き換えます。 2 つのパラメータのうち、
  • dataHandler: 実行が成功するとコールバック関数が呼び出され、クエリ結果セットを取得できます。
  • errorHandler: 実行が失敗したときに呼び出されるコールバック関数;


次のセクション
<!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, "php中文网")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ask.php.cn")'); msg = '<p>数据表已创建,且插入了两条数据。</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>查询记录条数: " + 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">状态信息</div> </body> </html>
コースウェア