Работа с бд в браузере chrome сообщение

Обновлено: 02.07.2024

Все современные браузеры потихоньку обзаводятся возможностями того, что сейчас принято называть HTML 5. Это значит, что уже можно начинать знакомиться с этими нововведениями. Что мы и будем постепенно делать на страницах "КВ". Сегодня начнём это знакомство с Web SQL - интегрированной в браузер системой управления базами данных.

Стандарт и штандарт HTML 5

Про HTML 5 сейчас много говорят. Например, у главы Apple Стив Джобса HTML 5 - это самое любимое понятие, которое он постоянно упоминает к месту и не к месту.

Новые веб-стандарты - это действительно круто, но для начала нужно разложить по полочкам всё, что связано с HTML 5. Рискую получить от читателей обвинения в графомании, но лирическое вступление на тему веб-стандартов необходимо сделать.

В первую очередь, HTML 5 - это конкретный технический стандарт гипертекстовых документов, которые и составляют основу всей системы World Wide Web. Они представляют собой текстовые контейнеры информации, связанные между собой гиперссылками.

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

Но HTML 5 - это сейчас не только технический стандарт текстовых документов, это ещё и то, что называется штандарт. То есть знамя, под которым сплотились и другие технологии. Конкретно это стандарт визуального форматирования CSS, формат векторной графики SVG, язык программирования JavaScript. Поэтому в большинстве случаев под HTML 5 понимается не конкретная техническая спецификация, а целый набор технологий.

Революция JavaScript

Об особенностях спецификации гипертекста HTML 5 мы уже писали ещё тогда, когда только появился первый черновик этого стандарта ("КВ" №4'2008). Теперь же обратимся к остальным технологиям и начнём со встраиваемого в браузер языка JavaScript.

Язык программирования браузера - это JavaScript. Первоначально браузеры были простыми и состояли только из парсера html-страниц и модуля вывода этих страниц на монитор. С течением времени к парсеру добавился программный интерфейс объектной модели документов DOM. Данный интерфейс представляет собой дерево объектов, в которое браузер превращает каждую html-страницу. Вот этим деревом DOM уже можно манипулировать. Для работы с интерфейсом DOM и был изобретён язык JavaScript.

Язык JavaScript стал самостоятельной технологией, не привязанной только к работе с DOM-деревьями. Он описывается отдельным стандартом ECMAScript и применяется не только в браузерах, а, например, используется в Adobe Photoshop.

Что же касается браузеров, то следующим механизмом, в котором активно задействован JavaScript, явилась модная технология AJAX, которая позволяет в фоновом режиме обмениваться браузеру данными в XML-формате с сервером.

Но браузеры крутеют. В них появляются всё новые и новые механизмы и возможности. И скоро они станут настоящими операционными системами. Кроме механизма DOM и AJAX, новые браузеры обзаведутся следующими технологическими фишками:

встроенная система управления базами данных Web SQL Database;
встроенный механизм хранения данных Local Storage;
кэширование ресурсов веб-приложений Application Cache;
параллельное вычисление Web Workers;
технология обмена информацией между браузером и сервером Web Sockets;
система уведомлений Notification;
манипуляции с графическими объектами Drag and Drop;
технология определения местоположения Geolocation;
2D-графика Canvas и 3D-графика WebGL.

И все эти внутренние механизмы браузера будут иметь свой собственный набор JavaScript API. Таким образом, если стандарт гипертекста HTML 5 - это эволюция, то развитие браузерного JS API - это настоящая революция, свидетелями которой мы сейчас являемся.

А теперь после такого внушительного вступления можно перейти к каждой из перечисленных технологических новинок. Начнём со встроенных в браузеры системой управления базами данных Web SQL Database.

"All your base are belong to us"

Последние версии некоторых современных браузеров содержат в себе встроенные системы управления базами данных. На момент написания этой статьи к браузерам, поддерживающим Web SQL, относятся Chrome, Safari и Opera. Установив один из этих веб-обозревателей, можно на практике опробовать работу встроенных баз данных.

Браузерные СУБД позволяют создавать и манипулировать базами данных путём стандартных SQL-запросов - CREATE TABLE, INSERT, SELECT, DROP и т.д. Интерфейс браузерных СУБД основан на интерфейсе легкой встраиваемой СУБД SQLite.

Но следует сказать, что использование SQLite - это не окончательный вариант, и устраивает не всех разработчиков браузеров. Вполне возможно, что со SQLite может произойти та же катавасия, что приключилась с поддержкой видео в стандарте HTML 5. Остаётся надеяться, что и здесь Google разберётся и наведёт порядок, как и в случае с кодеком VP8.

Наличие встроенных в браузер баз данных необходимо для разработки веб-приложений, работающих как онлайн, так и без подключения к Сети. Это одна из возможных замен технологии Gears, разрабатываемой ранее Google.

Веб-приложения могут использовать встроенные базы данных как хранилища табличных данных. Также на их основе можно создавать какие-либо оригинальные веб-приложения, например, браузерные календари, ежедневники. Тут уже всё зависит от фантазии программиста.

Каждый браузер создаёт для веб-приложения, использующего Web SQL Database, свою базу данных. И это следует учитывать. Поэтому для таких веб-приложений хороши, наверное, будут технологии виджетов Opera или же Adobe AIR.

API JavaScript Web SQL представляет набор прикладных программных интерфейсов для управления клиентской базой данных с помощью SQL. Или, другими словами, для доступа к встроенной СУБД используется "обёртка" из JavaScript вокруг SQL-запросов.

Создаём базу данных:

В результате будет создана база данных с именем 'my_base - это имя, 1.0 - версия текущей базы данных, My BASE - видимое имя, 51200 - количество байт для базы. Это число условный размер, и при необходимости он будет увеличиваться.

Создаём таблицу:

Вставляем в таблицу данные:

Выбираем из таблицы значение столбца data:

Но для управления встроенными базами данными можно воспользоваться и встроенной в браузер специальной консолью управления. Наиболее удобной такой консолью сейчас я бы назвал консоль в браузерах Chrome и Safari. Она находится в инструментах разработчика. В Chrome это "Управление текущей страницей - Разработчикам - Инструменты разработчика". В этих инструментах нужно перейти на вкладку Storage, и в левом меню Databases будут представлены все базы данных текущей веб-страницы или веб-приложения. Щёлкнув на треугольнике рядом с иконкой базы данных, можно развернуть список всех входящих в базу таблиц. А если щёлкнуть на самом значке базы данных, то главное окно инструментов разработчика превратится в консоль ввода SQL-запросов. И можно работать с базой данных через прямые запросы, не прибегая к JavaScript, что довольно удобно.

Заключение

Для публичных сайтов, сервисов и веб-приложений системой управления базами данных Web SQL ещё рановато пользоваться. Нет поддержки всеми браузерами, да и интерфейс ещё может поменяться.

А вот для личного употребления, для личных веб-приложений Web SQL вполне по желанию можно употреблять.

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

openDatabase("Test", "1.01", "Chrome DB",20000)

(о синтаксисе подробнее тут )

а далее по простому алгоритму:
создадим таблицу

как видим она малость пуста…

… наполним её написав обычный insert

Когда таблица готова, мы можем провести с ней разные манипуляции (select, update. )

Файлы с БД хранятся в XP по адресу C:\Documents and Settings\user\Local Settings\Application Data\Google\Chrome\User Data\Default\databases\file__0\

Вот так просто администрировать (пусть так громко, но термин есть термин) web sql db при помощи нашего любимого chrome.
Надеюсь эти небольшие знания помогут вам создавать интересные локальный приложения для своих целей, а так же красивые, мощные расширения.
Спасибо за внимание!

Здравствуйте. Делаю плагин для хром для хранение паролей, решил их хранить в web sql, только вот не пойму к примеру я сохранил пароль от контакта, посмотрел его в бд(ctr+shift+j -> resources-> web sql-> myBd), да он сохранился, но перешел на маил сохранил от маила пароль, смотрю а там пароли только от маила, то есть видно пароли только от тех сайтах на которых я нахожусь, почему так? И если я просто на любой страничке хочу вывести все поля запросом, то бд как буд то пустая.
Вот запрос из скрипта:

Chrome открывает страницы как web
Всем привет! Вот я разрабатываю wap сайт и столкнулся с такой проблемой что Google Chrome открывает.

Не могу удалить web search из Google Chrome
при открытии браузера открывается страница:ссылка] причем открывается постоянно при нажатии кнопки.

VLC Web Plugin в браузере Google Chrome
Господа! Караул! Я не могу найти ни одного приличного мануала, как в прочим и неприличного тоже.

Internet explorer, google chrome и dr web security space
Здравствуйте, 3 проблемы: 1) Через какой то интервал запускается internet explorer с рекламой. 2).

Web SQL
Web SQL и т.д. del

PL/SQL + WEB
Здравствуйте. В настоящее время пришлось столкнуться с разработкой ИС (веб-приложения) при помощи.

Связь pl/sql с web
У меня есть выпадающий список, который создается функциями: ( p_val in varchar2, p_data in.

SQl сервер и Web браузер
Добрый день . Прошу Вашей помощи в организации удалённого доступа через Web бразер к SQL server.

Подключение MS SQL к MS Web Developer Express
Здравствуйте. Помогите пожалуйста доделать программку. Необходимо сделать базу данных в SQL из 3.

Что почитать по web-develop на pl/sql?
Киньте, пожалуйста, ссылки на книги. Как c html-страницы вызвать процедуру pl/sql? Понятно.

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 (обязателен только первый — строка запроса) является массив аргументов для запроса, подставляемых в него вместо знаков ‘?’ (плейсхлодеров):

T. txecuteSql(‘INSERT INTO documents (title, type) VALUES (?, ?)’, [‘Order’,3]);

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

Читайте также: