Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

SQL html

SQL  html

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

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

var dataBases = openDatabase("DB", "0.1", "My first dataBases web SQL.", 200000);

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

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

if(dataBases){
    console.log('Соединение с базой данных успешно установлено');
}else{
    console.log('Ошибка соединения с базой данных');
}

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

dataBases.transaction(function(tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS `user`(id INT PRIMARY KEY , name TEXT, age INT)", [], function (result) {
            console.log('Таблица user успешно создана');
        },
        function (tx, error) {
            console.log('Ошибка при создании таблицы');
    })
});

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

Те кто слабо знаком с SQL поясню, мы создаем таблицу `user` ,если она не существует, со следующими полями(столбцами) id , name и age. Cправа от каждого названия поля мы указываем тип данных который он будет содержать. INTEGER , INT- целочисленный, TEXT - текстовой, PRIMARY KEY - уникальный ключ включает c собой автозаполнение autoicrement.

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

dataBases.transaction(function(tx) {
    tx.executeSql('SQL - ЗАПРОС'), [], function (result) {
	//Запрос успешно сформирован
       },
        function (tx, error) {
            //Ошибка при формировании запроса
    })
});

где dataBases - переменная содержащая соединение с базой данных,

transaction() - метод для отправки sql запроса к базе данных соединения,

executeSql() - Формирование sql запроса. Заметьте что метод executeSql() принимает в себя четыре аргумента.

Первый это сам sql - запрос. Вторым параметром идет массив, он может в себя принимать разные элементы которые мы можем через знак вопроса(?) по порядку подставлять в сам запрос. Что то вроде шаблонизатора.

Последние два аргумента это функции. Первая вызывается если sql запрос сформирован правильно и не содержит ошибок, вторая как раз вызывается при неправильном формировании sql -запроса.

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

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

dataBases.transaction(function(tx) {
    tx.executeSql("INSERT INTO `user` (name, age) values(?, ?)", ["Andrey", 24], function(result){
        console.log('Были добавлены новые данные в таблицу user');
    }, function(tx,error){
        console.log('Произошла ошибка при добавлении данных в таблицу user');
    });
});

Здесь мы сформировали новый sql запрос с помощью которого добавляем новую строчку в таблицу user где в поле name помещаем значение "Andrey", а в age - 24. Заметьте что здесь мы воспользовались для удобства вторым параметром, массивом элементы которого последовательно подставляются вместо знаков вопроса(?) в самом запросе.

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

dataBases.transaction(function(tx) {
    tx.executeSql("SELECT * FROM `user`", [], function(tx, result) {
        for(var i = 0; i < result.rows.length; i++) {
       console.log(result.rows.item(i)['id'],result.rows.item(i)['name'],result.rows.item(i)['age']);
        }}, function(){
	console.log('Произошла ошибка при выборке');
	})
});

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

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

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

dataBases.transaction(function(tx) {
    tx.executeSql("DELETE  FROM `user` WHERE id=?", [1], function(tx, result) {
            console.log('Удалена строчка из таблицы user');
        }, function(){
        console.log('Произошла ошибка при удалении');
    })
});

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

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

dataBases.transaction(function(tx) {
    tx.executeSql("DELETE  FROM `user`", [], function(tx, result) {
            console.log('Таблица user очищена');
        }, function(){
        console.log('Произошла ошибка при удалении');
    })
});

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

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

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

dataBases.transaction(function(tx) {
    tx.executeSql("UPDATE  `user` SET name=?, age=? WHERE id=?", ["Maks", 30, 3], function(result){
        console.log('Данные в таблице обновлены');

    }, function(tx,error){
        console.log('Произошла ошибка при обновлении');

    });
});

Здесь с помощью sql запроса обновления(update) мы в строке с id=3 изменили значение поля name и age. В поле name мы установили значение Maks, а в поле age - 30.

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

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

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

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

вк

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

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Андрей

08:54 30-09-2019

что такое

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm