Простой список TODO с использованием веб-баз данных HTML5.

Введение

Веб-базы данных являются новинкой в ​​HTML5. Веб-базы данных размещаются и сохраняются внутри браузера пользователя. Позволяя разработчикам создавать приложения с богатыми возможностями запросов, предполагается, что появится новое поколение веб-приложений, которые смогут работать как в сети, так и в автономном режиме.

Пример кода в этой статье демонстрирует, как создать очень простой менеджер списков дел. Это очень высокоуровневый обзор некоторых функций, доступных в HTML5.

Предварительные условия

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

var html5rocks = {};
html5rocks.webdb = {};

Асинхронный и транзакционный

В большинстве случаев, когда вы используете поддержку веб-базы данных, вы будете использовать асинхронный API . Асинхронный API является неблокирующей системой и, как таковой, не будет получать данные через возвращаемые значения, а вместо этого будет получать данные, доставленные в определенную функцию обратного вызова.

Поддержка веб-базы данных через HTML является транзакционной. Невозможно выполнять операторы SQL вне транзакции. Существует два типа транзакций: транзакции чтения/записи ( transaction() ) и транзакции только чтения ( readTransaction() ). Обратите внимание, что чтение/запись заблокируют всю базу данных.

Шаг 1. Открытие базы данных

Для доступа к базе данных ее необходимо открыть.
Вам необходимо определить имя, версию, описание и размер базы данных.

html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}

html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}

html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

Шаг 2. Создание таблицы

Создать таблицу можно только выполнив оператор SQL CREATE TABLE внутри транзакции.

Мы определили функцию, которая создаст таблицу в событии body onload. Если таблица еще не существует, она будет создана.

Таблица называется todo и состоит из 3 столбцов.

  • ID — увеличивающийся последовательный столбец идентификаторов
  • todo — текстовый столбец, который является телом элемента
  • added_on - время создания элемента todo
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
                "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}

Шаг 3. Добавление данных в таблицу

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

Создается транзакция, внутри транзакции выполняется INSERT в таблицу todo.

executeSql принимает несколько параметров: SQL для выполнения и значения параметров для привязки запроса.

html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
    [todoText, addedOn],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

Шаг 4. Выбор данных из таблицы

Теперь, когда данные находятся в базе данных, вам нужна функция, которая возвращает данные обратно. В Chrome Webdatabase используют стандартные запросы SQLite SELECT.

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
    html5rocks.webdb.onError);
});
}

Обратите внимание, что все эти команды, используемые в этом примере, являются асинхронными, и поэтому данные не возвращаются из транзакции или вызова executeSql. Результаты передаются обратному вызову success.

Шаг 4а. Рендеринг данных из таблицы

После извлечения данных из таблицы будет вызван метод loadTodoItems.

Обратный вызов onSuccess принимает два параметра. Первый — транзакция запроса, а второй — набор результатов. Довольно просто выполнить итерацию по данным:

function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}

todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>" + row.todo + 
        " [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" + 
        row.ID +");\'>Delete</a>]</li>";
}

Результатом вызова этого метода является то, что список дел преобразуется в элемент DOM с именем «todoItems».

Шаг 5. Удаление данных из таблицы

html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

Шаг 6. Подключаем все

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

....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>

<body onload="init();">

Нужна функция, которая извлекает данные из DOM, поэтому вызовите метод html5rocks.webdb.addTodo

function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}