web sql что это

WebSQL — реляционная база данных на веб-странице

WebSQL DB — это API для доступа к полноценному SQL-хранилищу данных, основанному на SQLite. Впрочем, последнее обстоятельство — скорее, особенность реализации и стандартом не оговаривается, хотя диалект SQL используется именно от SQLite. (Вообще, использование SQLite в веб-браузере — практика не новая: Firefox и Chrome давно применяют эту компактную СУБД для хранения настроек, паролей, закладок.)

Работает этот механизм так:

Var db = tpenDatabase(‘my_db’,’1.0′,’test’,2*1024*1024, function()< console. log(‘БД открыта!’)

Console. log(‘новая БД!’)

Код создает объект для взаимодействия с базой данных. Если БД с таким именем не существует, она будет создана. Аргументы метода следующие:

— объем БД (предполагаемый);

— функция обратного вызова, вызываемая при успешном открытии;

— функция обратного вызова, вызываемая при создании новой БД. Далее можно делать запросы, оборачивая их в транзакцию:

T. executeSql(‘SELECT title FROM documents’, [], function()< >);

Функция получает аргумент — объект транзакции (transaction object), вторым аргументом метода которого e xecuteSql (обязателен только первый — строка запроса) является массив аргументов для запроса, подставляемых в него вместо знаков ‘?’ (плейсхлодеров):

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

T. exesuteSql(‘SELECT title FROM documents WHERE created

Источник

Поддержка HTML5 Web Sql Database и Google Gears с примерами

Мы все ценим свое время, и я хочу помочь вам (ну может быть не вам, но кому-то уж точно) его сберечь.
Речь пойдет о клиентских БД — Web Sql Database и Google Gears.

По долгу службы я занимаюсь веб приложением, использующим Local Database и Web Workers.

Итак, что нам требуется:

1. SQL запросы, выбирающие из локальной БД всякие данные
2. Скачивание данных через Ajax в фоновом режиме и запись их в локальную БД
3. Поддержка Firefox, Google Chrome, Safari, IE
4. Поддержка Win, Linux, MacOS, iPad

С первого взгляда ничего страшного, но со второго начинаются проблемы.

Google Gears

Поддержка Google Gears (SQL и Web Workers) показана в таблице ниже.
Основные критерии:
± поддержка Local Database,
± поддержка Web Workers
± поддержка Local Database из Web Worker
X — не проверялось
(сразу скажу — Google Gears во всех поддерживаемых браузерах поддерживает или все, или ничего, но для наглядности оставим три значения)

Chrome	Firefox	Safari	IE
Win	+++	+++	—	+++
MacOS	—	+++	—	X
iPad	X	X	—	X
Linux	—	+++	—	X

Так же для Safari (MacOS) существует отдельный кастомный плагин для Google Gears, который работает, только при запуске Safari в 32-bit режиме (Snow Leopard).

Здесь все прозрачно и просто, информация и примеры — огромное количество в интернете.
Подключаем gears_init.js.

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

var connect = google.gears.factory.create(‘beta.database’);
connect.open(dbName);
var result = connect.execute(query, fields);
while (result.isValidRow()) <
var > result.next();
>
connect.close();

Примеры использование Google Gears Workers

var workerPool = google.gears.factory.create(‘beta.workerpool’);
var childWorkerId = workerPool.createWorkerFromUrl(‘worker.js’);
workerPool.onmessage = function(a, b, message) <
switch (message.body) <
case ‘EVENT_1’:
break;
case ‘EVENT_2’:
break;
default:
break;
>
>;
workerPool.sendMessage(, childWorkerId);

worker.js:
var worker = google.gears.workerPool
worker.onmessage = function(a, b, message) <
//event message.body.event
worker.sendMessage(‘EVENT_1’, message.sender);
>

HTML5 Web Sql Database

Поддержка HTML5 Web Sql Database показана в таблице ниже.
Основные критерии:
± поддержка Local Database,
± поддержка Web Workers
± поддержка Local Database из Web Worker
X — не проверялось

Chrome	Firefox	Safari	IE
Win	+++	-+-	++-	—
MacOS	+++	-+-	++-	X
iPad	X	X	+—	X
Linux	+++	-+-	X	X

Внезапно появляется еще одна проблема — Web Sql Database работает асинхронно. Т.е. выполнить цепочку запросов просто так нельзя. Так же вы можете быть на 100% уверены, что когда выполнится следующий оператор после sql запроса, sql запрос еще не будет выполнен.
Есть несколько вариантов решений:

1) Выполнять вложенные действия. Т.е. мы выполняем sql, после выполнения вызывается callback функция, в которой мы делаем нужные нам действия. Не очень удобно.

2) Построить систему событий. При выполнении запроса, выбросить определенное событие, успешно его поймать и выполнить продолжение. Тоже не очень удобно.

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

var worker = new Worker(«worker.js»);

worker.onmessage = function (evt) <
switch (evt.data) <
case ‘EVENT_1’:
break;
default:
break;
>
>;
worker.onerror = function (evt) <
alert(‘error: ‘ + evt.data);
>;

onmessage = function (event) <
switch (event.data) <
case ‘START’:
break;
default:
break;
>
postMessage(‘EVENT_1’);
>;

Примеры использования Web Sql Database вне Web Worker

var connect = window.openDatabase(dbName, «1.0», «», 1024*1024*5);
connect.transaction(function(db) <
//Асинхронно
db.executeSql(«SELECT id FROM test», fields,
function(t, results) <
for (i = 0; i

Примеры использования Web Sql Database в Web Worker

var db = openDatabaseSync(‘db’, «1.0», «», 1024*1024*5);
db.transaction(function(db) <
//Синхронно
var result = db.executeSql(«SELECT id FROM test»);
for (var i = 0; i

Так же есть такая вот проблема в Chrome — жесткий лимит в 5 мб для БД, который на данный момент невозможно расширить обычными методами js.
По спецификации Chrome должен показать окно о превышении лимита в 5 мб и вопрос на разрешение увеличить его. Но… увы.

Я надеюсь, это вам поможет сэкономить немного драгоценного времени.

Источник

HTML 5. Работа с Web SQL базой данных

В HTML 5 есть много новых возможностей, которые позволяют web разработчикам создавать более мощные и насыщенные приложения. К этим возможностям относятся и новые способы хранения данных на клиенте, такие как web storage(поддерживается в IE8) и web SQL database.

При этом если web storage ориентирован на хранение пар ключ-значение, то в случае с web SQL database у нас есть полноценный sqlite(во всех текущих реализациях применяется именно этот движок баз данных, что является проблемой при стандартизации).

Далее я расскажу, как работать с web SQL database. При этом примеры естественно будут на JavaScript. Кроме того, стоит отметить, что с поддержкой браузерами всего этого хозяйства дела обстоят, не очень хорошо, но всё постепенно меняется к лучшему и, скажем, в Opera 10.50 поддержка будет, а браузерах на движке WebKit она уже есть. Более подробно про то, какой браузер, что поддерживает можно узнать, пройдя по ссылке.

Соединение с базой данных.

Подсоединиться к базе данных очень просто:

db = openDatabase(«ToDo», «0.1», «A list of to do items.», 200000);

Данный код создаёт объект, представляющий БД, а если базы данных с таким именем не существует, то создаётся и она. При этом в аргументах указывается имя базы данных, версия, отображаемое имя и приблизительный размер. Кроме того важно отметить, что приблизительный размер не является ограничением. Реальный размер базы данных может изменяться.

Успешность подключения к БД можно оценить, проверив объект db на null:

Всегда предпринимайте данную проверку, даже если соединение с БД для данного пользователя уже производилось в прошлом, и было успешно. Могут измениться настройки безопасности, закончиться дисковое пространство (скажем, если пользователь использует смартфон) или фаза луны окажется неподходящей.

Выполнение запросов.

Для выполнения запросов к БД предварительно надо создать транзакцию, вызвав функцию database.transaction(). У неё один аргумент, а именно другая JavaScript функция, принимающая объект транзакции и предпринимающая запросы к базе данных.

db.transaction(function(tx) <
tx.executeSql(«SELECT COUNT(*) FROM ToDo», [], function(result)<>, function(tx, error)<>);
>);

Давайте теперь изменим код так, чтобы при невозможности выборки из таблицы «ToDo»(которой пока не существует), данная таблица создавалась.

db.transaction(function(tx) <
tx.executeSql(«SELECT COUNT(*) FROM ToDo», [], function (result) < alert('dsfsdf') >, function (tx, error) <
tx.executeSql(«CREATE TABLE ToDo (id REAL UNIQUE, label TEXT, timestamp REAL)», [], null, null);
>)>);

Вставка данных.

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

Работа с результатами запросов.

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

Вы можете получить доступ к какой-либо строке результата вызвав функцию result.rows.item(i), где i – индекс строки. Далее, для получения требуемого значения, нужно обратиться к конкретному столбцу по имени – result.rows.item(i)[ «label»].

Следующий пример выводит результат запроса к базе данных на страницу:

db.transaction(function(tx) <
tx.executeSql(«SELECT * FROM ToDo», [], function(tx, result) <
for(var i = 0; i

Заключение.

Использование web SQL database предоставляет мощные возможности, но не стоит увлекаться. Если задачу можно решить с помощью web storage, лучше использовать его.

Вы можете найти дополнительную информацию по данной теме в соответствующем разделе сайта консорциуме w3c.
Также для web SQL database уже начали разрабатывать ORM библиотеки. Пример такой библиотеки тут.

Источник

Web sql что это

SQL html

Всем привет. Сегодня мы рассмотрим работу с api Web SQL которое позволяет нам хранить данные в локальной базе данных в браузере. Данный api работает примерно потому же принципу что и localStorage. Отличие в том что localStorage хранит данные в виде пары ключ и значение, а Api Web SQL хранит данные в таблицах локальной базы данных. И для обращения к таблицам базы используются SQL запросы. Кросс доменные ограничения также распространяются на данный api. То есть вы не сможете использовать общую базу данных на разных доменах. Итак, приступим!

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

C помощью данного кода мы создали базу данных с названием DB, указали ей версию 0.1 и описание «My first dataBases web SQL», последним параметром мы выставили приблизительный размер 200000 выделенный под содержимое базы.

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

При успешном соединении идем далее. Следующим шагом у нас будет создание таблиц в базе данных.

C помощью данного кода мы создали таблицу user. Здесь мы уже воспользовались sql запросом «CREATE TABLE IF NOT EXISTS `user`(id INTEGER PRIMARY KEY, name TEXT, age INT)».

Для отправки и формирования запроса мы воспользовались такой конструкцией:

Отлично! Идем дальше!

После создания таблицы мы можем начать ее наполнять своими данными.

Теперь рассмотрим вывод значений из таблицы:

С помощью данного кода мы выведем все строки и их поля таблицы user. Причем если вы не закомментировали предыдущую строчку с добавлением новых значений, то при каждой перезагрузке страницы нам будет добавляться новая строка. Обратите внимание на поле id. При добавлении данных в таблицу мы его не указывали. Оно заполняется самостоятельно благодаря типу INTEGER и первичному(уникальному) ключу PRIMARY KEY который мы указали при создании таблицы. Это поле лучше использовать во всех таблицах, так как оно неповторимо, уникально и позволяет более точно указывать какую строку мы хотим обновить или удалить.

Обновление и удаление это наши последние операции которые мы рассмотрим.

Итак, рассмотрим пример с удалением. Допустим мы хотим удалить строку из таблицы с То есть это по сути первый элемент таблицы.

После выполнения данного кода строка с id равная 1, будет удалена из таблицы user. Теперь возможно вы понимаете для чего нужен id. С помощью него мы можем идентифицировать каждую строку в таблице получить, обновить, удалить ее не затрагивая другие строки.

Если мы хотим удалить все данные из таблицы нам достаточно не указывать условие WHERE.

C помощью данного кода мы полностью очистим таблицу user.

И в завершении данной статьи рассмотрим обновление данных в таблице.

Допустим мы хотим обновить значения полей таблицы user в строке с >

Вот в принципе и все что я хотел вам рассказать про API web SQL.

API web SQL позволяет нам создавать мощные приложения имеющие свою локальную базу данных которая будет хранится на стороне клиента. Конечно для того чтобы им пользоваться необходимо уметь строить и понимать основные sql запросы. Без этого никак.

Использование данного api в небольших проектах не имеет особого смысла. Так как существует тот же самый api localStorage.

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

На этом у меня все. Желаю вам успехов и удачи! Пока!

Источник

HTML5 Web SQL Database

Веб-базы данных SQL API не является частью спецификации HTML5, но это отдельная спецификация, представила набор API-интерфейсов для использования базы данных SQL операции клиента.

Если вы задний конец веб-программист, он должен быть легко понять операции SQL.

Web SQL Database может работать в последней версии Safari, Chrome и Opera браузер.

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

Ниже приведены три основные методы, определенные в спецификации:

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

Мы можем использовать метод OpenDatabase (), чтобы открыть существующую базу данных, если база данных не существует, создать новую базу данных, используйте следующий код:

OpenDatabase () метод пяти параметров, соответствующих описанию:

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

Для выполнения операции запроса

Исполнение использует функцию database.transaction ():

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

Вставка данных

После выполнения выше заявление, чтобы создать таблицу, мы можем вставить некоторые данные:

Мы также можем использовать динамическое значение для вставки данных:

Instance e_id e_log и внешние переменные, ExecuteSQL параметр массива отображается на каждой записи в «?».

Считывание данных

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

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

Примеры вышеуказанных операционных результатов, как показано ниже:

Удалить запись

Формат удалять записи следующим образом:

Удалить указанный идентификатор данных также могут быть динамическими:

Обновление записей

обновлять записи, используя следующий формат:

Обновления указанным идентификатором данные также могут быть динамическими:

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

Примеры вышеуказанных операционных результатов, как показано ниже:

Источник