Web SQL

Иногда нужно хранить данные на клиенте. И, казалось бы, мест для этого предостаточно. В зависимости от потребностей можно использовать либо сессию и куки, либо хранилище браузера - web storage. Но у всех методов есть как преимущества так и недостатки. Время жизни сессии ограничено и не всегда есть доступ к бекенду для настройки и контроля. Хранилище web storage позволяет хранить любые объекты, предварительно сериализировав их в JSON, но его размер лимитирован, а поиск данных может быть очень неудобным. Ни один из вышеперечисленных способов не дает возможности быстрого поиска и сортировки данных.

К счастью в браузере Google Chrome есть возможность пользоваться старыми добрыми SQL таблицами. Это значит что мы можем хранить огромное количество небольших записей, а в будущем с легкостью выбирать нужные из них и сортировать в нужном порядке приложив минимум усилий. Для сбора статистики и ведения журнала логов это очень хорошее решение. Особенно в контексте разработки расширений для браузеров.

Официально эта технология объявлена устаревшей. Уже 9 лет. Работа над стандартизацией прекратилась в 2010 году. Причина в том, что Web SQL использует только одну реализацию - Sqlite. А для продолжения работы над стандартизацией технологии нужно как минимум две независимые технологии. Но, тем не менее, в современных версиях Google Chrome, Web SQL работает отлично. С другими браузерами все далеко не так однозначно.

Web SQL доступен на любой странице в браузере, а также расширениям браузера. Для начала работы необходимо приложить минимум усилий: создать базу данных и создать таблицу. Всё это делается элементарными командами.

У объекта window есть метод openDatabase. Именно он открывает готовую БД или, если это необходимо, создает новую. Этот метод синхронный и при успешном выполнении возвращает объект, предназначенный для дальнейшей работы с открытой базой. Далее для выполнения SQL скриптов нужно создать транзакцию и выполнить метод executeSql. Эти методы уже асинхронные. 

Примеры использования:

Открытие базы данных

var database = openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024);

Параметры, которые принимает метод openDatabase:

'documents' - название для базы данных

'1.0' - версия

'Offline document storage' - описание

5*1024*1024 - предполагаемый размер - 5 МБ

Пятым параметром можно передать callback-функцию, которая будет вызвана после открытия базы данных.

Создание таблицы

database.transaction(function(tx) { 

tx.executeSql(

"CREATE TABLE first (id, name)",

[], 

function(result) {

console.log('table \'first\' has been created successfully! result:', typeof result, result);

},

function(tx, error) {

console.log('failed to create table \'first\'! error:', typeof error, error);

}

);

});

Из полученного объекта database вызываем метод transaction, который создает транзакцию и вызывает callback-функцию которая передавалась единственным параметром. После этого у объекта-транзакции вызываем метод executeSql, который и выполнит SQL скрипт. 

Первый параметр -  SQL скрипт.

Второй параметр - это значения, которые должны подставляться в скрипт. Для создания таблицы ни какие значения нам не нужно, поэтому второй параметр - это пустой массив.

Третий параметр - callback-функция, которая будет вызвана при успешном выполнении скрипта.

Четвертый параметр - callback-функция, которая будет вызвана в случае ошибки.

Добавление строки в таблицу

database.transaction(function(tx) {

 tx.executeSql(

"INSERT INTO first (id, name) values (?, ?)",

[1, 'asdf'], 

function(result) {

console.log('row has been inserted into \'first\' table successful! result:', typeof result, result);

},

function(tx, error) {

console.log('failed to insert data into \'first\' table! error:', typeof error, error);

}

);

});

Для начала создаем транзакцию как и в прошлом примере. Затем Выполняем SQL скрипт тоже точно так же как и в прошлом примере. Но в этот раз массив со значениями уже не пустой, а содержит данные, которые должны быть вставлены в строку таблицы. В SQL скрипте присутствуют знаки вопроса, которые будут заменены на конкретные данные из массива со значениями по порядку. Это отличный метод для экранирования данных, установки соответствующих типов и борьбы с SQL-инъекциями.

Выборка данных из таблицы

database.transaction(function(tx) {

tx.executeSql(

"SELECT * FROM first",

[], 

function(transaction, result) {

console.log('result:', typeof result, result);

if (result.rows) {

for (var i = 0; i < result.rows.length; i++) {

console.log('row item:', result.rows[i]);

}

}

},

function(tx, error) {

console.log('failed to select data from table \'first\'! error:', typeof error, error);

}

);

});

Создание транзакции и выполнение SQL скрипта работает также как было рассмотрено в предыдущих примерах. Отличие от прошлых примеров только в обработке полученного результата. В случае успешного выполнения скрипта будет вызвана соответствующая callback-функция, которая вернет объект result, который и содержит данные полученные из таблицы.

Информацию о работе с базой данных SQLite можно найти на официальном сайте.

База данных Web SQL не привязывается к сессии, но привязывается к домену, на котором она была создана. Можно авторизоваться на любом сайте, создать БД, таблицы и записи, потом сменить аккаунт. Доступ к базе и всем данным останется. Но если открыть другой сайт, то уже с него не удастся получить доступ к прошлой базе. Прошлую базу можно найти если снова вернуться на сайт на котором она была создана. Работает даже после перезапуска браузера.

В случае когда база была создана из расширения для браузера она будет доступна на всех сайтах. 

Как альтернативу технологии Web SQL еще можно использовать IndexedDB. Это  NoSQL хранилище данных.

Документация по Web SQL находится тут.