В одной из прошлых статей я рассказывал о технологии HTML 5 IndexedDB. Сегодня поговорим о Web SQL. В отличие от IndexedDB, Web SQL - это полноценная база данных SQLite, к которой можно отправлять запросы на языке SQL. Размер базы ограничен только свободным местом на диске.
При этом использовать Web SQL при разработке сайтов или даже каких-то веб-сервисов нецелесообразно. Для подобных задач вполне будет достаточно IndexedDB, а вот при разработке оконных приложений с использованием Electron.js или NW.JS Web SQL может быть весьма полезен. Посмотрим на примере. как же работать с Web SQL. Для начала создадим файл index.html, а также две папки: css и js. В папке css создадим файл style.css, а в папке js создадим три файла: main.js, database.js и app.js
Теперь откроем файл index.html и создадим разметку.
В файле style.css опишем необходимые стили.
Теперь перейдем в файл database.js и создадим объект DataBase.
Конструктор объекта принимает имя базы данных, которое затем присваивается свойству dbName. Свойству ucDbName присваиваем тоже имя, но первую букву делаем заглавной. Свойству db присваиваем дескриптор открытой базы. Функция openDatabase открывает базу данных и принимает четыре параметра:
- имя базы данных;
- версия базы;
- описание;
- размер базы.
Теперь создадим метод create. Этот метод будет создавать таблицу.
Метод принимает имя создаваемой таблицы в виде параметра. В переменной strFields будет содержаться sql запрос. В объект fields поместим имена наших полей и тип хранимых данных. В нашем случае у всех полей тип будет TEXT. В цикле for сформируем строку запроса. Методом transaction отправим запрос. В sql запросе присутствует условие create table if not exists - это значит, что таблица будет создана только в том случае. если она не существует. Теперь создадим метод add(). В качестве параметра методу передается имя таблицы.
Создадим три массива: q, vars и vals. В методе values содержатся имена полей таблицы с присвоенными значениями, которые в свою очередь берутся из текстовых полей. В цикле for заполним массив q знаками вопроса, массив vars заполним именами полей таблицы, а массив vals сформируем из значений полей ввода. Далее отправим sql запрос. Создадим метод load(). Этот метод будет загружать данные из базы и выводить в виде таблицы.
Переменной sql присваиваем запрос, а затем его отправляем. В переменной result сохраняется результат запроса, т.е. наша таблица из базы данных. В переменную n сохраняем количество записей, прочитанных из базы. Далее формируем html таблицу из блоков div с полученными из базы данными. Теперь перейдём к созданию метода update(). Этот метод будет служить для изменения записей в базе данных. В метод передадим четыре параметра:
- name - имя таблицы;
- field - имя изменяемого поля;
- value - новое значение изменяемого поля;
- id - номер строки в базе данных.
В переменной sql формируем запрос, а затем отправляем его. Создадим метод del(). Этот метод будет удалять указанную строку из базы данных. В метод передадим два параметра:
- name - имя таблицы;
- id - номер удаляемой строки.
В переменной sql формируем запрос, а затем отправляем его. И последним создадим метод clear() - этот метод будет удалять таблицу из базы данных. В метод передадим в качестве параметра имя удаляемой таблицы.
В переменной sql формируем запрос, затем отправляем его и в конце очистим нашу html таблицу. На этом закончим с файлом database.js и перейдем к файлу app.js, в котором создадим объект App().
В конструктор передадим два параметра:
- baseName - имя базы данных;
- tableName - имя таблицы.
Свойству db присваиваем экземпляр объекта DataBase(), свойству tbl присваиваем имя таблицы. В объекте fields будем хранить ссылки на текстовые поля. В объекте btn сохраним ссылки на кнопки и на блок с таблицей. Теперь добавим метод create(). Этот метод будет создавать события.
В первую очередь вызовем метод create() объекта DataBase(), тем самым мы создадим таблицу, если она отсутствует. Затем повесим на кнопку добавить событие click. Убедимся, что клик был сделан по кнопке и проверяем. заполнены ли поля. Если всё так, то добавим новую запись в базу и сразу выведем обновленные данные в таблицу. После очистим текстовые поля, пройдясь по ним в цикле for. Следующим шагом повесим событие click на нашу таблицу и также убедимся, что клик произведен по кнопке. Если все верно, то удалим таблицу из базы данных. Теперь повесим на таблицу событие click, убедимся что кликнули по кнопке, а не по ячейке и. если все верно, удалим строку из базы данных и загрузим обновленные данные. Еще повесим на таблицу событие dblclick и убедившись, что кликнули дважды по ячейке таблицы, сделаем ее редактируемой, добавив атрибут contenteditable. установленный в true, и установим фокус на ячейке. В завершении повесим на таблицу событие keydown. Проверим, вызвано ли событие на ячейки таблицы и является ли ячейка в данный момент редактируемой. Далее проверяем на нажатие кнопки ENTER и, если всё верно, то выключаем редактирование ячейки. установив событие contenteditable в false. В переменной fld сохраним имя редактируемого поля, переменной vle присвоим новое значение отредактированного поля, а в переменной id сохраним порядковый номер строки и обновим данные в базе. На этом мы закончим редактировать файл app.js и перейдем в файл main.js. Повесим на объект window событие load.
В этом событии создадим экземпляр объекта App(). Имя базы данных у нас будет dbusr, а имя таблицы users. Загрузим данные из базы данных. если таковые имеются, и вызовем метод create() объекта App(). По итогу у нас должно получиться примерно следующее приложение:
При этом в панели разработчика база данных имеет следующий вид:
На этом всё!