HTML 5 Web SQL Database Core Trident Trident

Автор：Eve Cole Время обновления：2025-03-29 22:32:02

API базы данных Web SQL фактически не включена в спецификацию HTML 5. Это независимая спецификация, которая вводит набор API, которые используют SQL для работы с базами данных клиента. Предполагая, что вы отличный веб -разработчик, нет никаких сомнений в том, что вы уже знакомы с понятиями, связанными с SQL и базами данных. Если вы не знакомы с SQL, то продолжайте читать. Перед этой статьей лучше сначала изучить учебники, связанные с SQL.

Последние версии Chrome, Safari и Opera все поддерживают базы данных Web SQL.

Основные методы

В этой статье будут представлены три основных метода, определенные в спецификации:

1. Opendatabase: Этот метод использует существующую базу данных или создает новую базу данных для создания объекта базы данных.

2. Транзакция: этот метод позволяет нам управлять коммитией транзакции или отката в соответствии с ситуацией.

3. executesql: этот метод используется для выполнения реальных запросов SQL.

Откройте базу данных

Метод OpenDatabase открывает существующую базу данных. Если база данных не существует, она также может создать базу данных. Синтаксис для создания и открытия базы данных выглядит следующим образом:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);

Приведенный выше метод OpenDatabase использует следующие пять параметров:

1. Имя базы данных (MYDB)

2. Номер версии (1.0)

3. Описание (тест DB)

4. Размер базы данных (2*1024*1024)

5. Создайте обратный вызов

Последний, то есть пятый параметр, создает обратный вызов, который будет вызван при создании базы данных, но даже без этого параметра база данных может быть создана во время выполнения.

Выполнить запрос

Выполнить запрос, используя функцию database.transaction (), которая требует только одного параметра, и следующее является реальным оператором запроса:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('createbableifnotexistslogs (idunique, log)');
 });

Приведенный выше запрос создаст таблицу журналов в базе данных MYDB.

Вставьте операцию

Чтобы вставить новую запись в таблицу, мы добавили простой запрос SQL к оператору вышеуказанного запроса, и измененный оператор выглядит следующим образом:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('createbableifnotexistslogs (idunique, log)');
 tx.executesql ('insertintologs (id, log) значения (1, foobar)');
 tx.executesql ('insertintologs (id, log) значения (2, logmsg)');
 });

При вставке новой записи мы также можем передать динамические значения, такие как:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('createbableifnotexistslogs (idunique, log)');
 tx.executesql ('insertintologs
 (id, log) значения (?,? '), [e_id, e_log];
 });

Здесь e_id и e_log являются внешними переменными, выполняют карты каждого элемента? В параметрах массива.

Читать операцию

Если вы хотите прочитать уже существующую запись, мы используем обратный вызов для захвата результата, код выглядит следующим образом:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('createbableifnotexistslogs (idunique, log)');
 tx.executesql ('insertintologs (id, log) значения (1, foobar)');
 tx.executesql ('insertintologs (id, log) значения (2, logmsg)');
 });
 db.transaction (function (tx) {
 tx.executesql ('select*fromlogs', [], function (tx, результаты) {
 varlen = Results.Rows.Length, i;
 msg = <p> foundrows:+len+</p>;
 document.queryselector ('#status'). innerhtml+= msg;
 for (i = 0; i <len; i ++) {
 Alert (Results.Rows.Item (i) .log);
 }
 },нулевой);
 });

Полный пример

Наконец, мы представляем то, что было ранее описано в полном документе HTML 5, используя браузер для анализа документа HTML 5.

 <! Doctypehtml>
 <html>
 <голова>
 <scripttype = text/javascript>
 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 varmsg;
 db.transaction (function (tx) {
 tx.executesql ('createbableifnotexistslogs (idunique, log)');
 tx.executesql ('insertintologs (id, log) значения (1, foobar)');
 tx.executesql ('insertintologs (id, log) значения (2, logmsg)');
 msg = '<p> logmessageCreatedandRowinserted. </p>';
 document.queryselector ('#status'). innerhtml = msg;
 });
 db.transaction (function (tx) {
 tx.executesql ('select*fromlogs', [], function (tx, результаты) {
 varlen = Results.Rows.Length, i;
 msg = <p> foundrows:+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;
 }
 },нулевой);
 });
 </script>
 </head>
 <тело>
 <divid = statusname = status> statusmessage </div>
 </body>
 </html>

Ниже приведен результат вывода, созданный в последней версии браузера Safari или Opera.

 Logmessagecreatedandrowinserted.
 Органы: 2
 Фубар
 logmsg