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

Paul Kinlan

Введение

Веб-базы данных — новая функция 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 внутри транзакции.

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

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

• ID - увеличивающийся столбец последовательного идентификатора.
• todo — текстовый столбец, который является телом элемента.
• add_on — время создания элемента задачи.

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 веб-база данных использует стандартные запросы 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. Результаты передаются обратному вызову успеха.

Шаг 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 = "";
}