精华内容
下载资源
问答
  • 你也可以参考我们的 SQL 教程,了解更多数据库操作知识。 Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互...
  • 这一篇我们简单来说一下WebSql ,Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 API , SQL如果学习过数据库的同学应该非常熟悉了 就是用来操作...

    HTML4教程
    上一篇
    博主个人主页
    博主视频教程

    前言

    这一篇我们简单来说一下WebSql ,Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 API , SQL如果学习过数据库的同学应该非常熟悉了 就是用来操作数据的 比如增删改查 等等 ,Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

    起步

    以下是规范中定义的三个核心方法

    • openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
    • transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
    • executeSql:这个方法用于执行实际的 SQL 查询。

    openDatabase() 方法对应的五个参数说明

    • 数据库名称
    • 版本号
    • 描述文本
    • 数据库大小 以字节为单位

    transaction

    • 创建获取数据回调
    • 错误回调

    executeSql

    • SQL 语句 可以是增删改查
    • 参数化查询所需要的值
    • 回调函数 获取到查询的数据

    openDatabase 方法使用

    • 我们可以使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库
    var db = openDatabase('mywebdb', '1.0.0', 'test', 2*1024);
    

    transaction方法使用

    通过db对象可以调用在这个方法 传递一个回调函数 第一个是成功的 第二个回调函数是错误的回调函数 第一个回调函数接受一个tx对象 可以调用executeSQL方法执行SQL语句

     db.transaction(function (tx) {
               console.log(tx);
             },function (err) {
                 console.log(err);
             });
    

    executeSQL方法使用

    db.transaction(function (tx) {
                 tx.executeSql('CREATE TABLE IF NOT EXISTS INFO (id unique, name)');
                 tx.executeSql('INSERT INTO INFO (id, name) VALUES (1, "Lusn")');
                 tx.executeSql('INSERT INTO INFO (id, name) VALUES (2, "liwenxiang.top")');
             })
    

    写完这些代码后 运行页面 这句话的意思就是创建了一个数据库 名字叫 INFO 刷新浏览器之后我们去查看对应的数据

    在这里插入图片描述
    在这里插入图片描述
    就显示出对应的数据

    了解过SQL的人可能会比较轻松就理解了

    刚刚实现了增加数据 我们来看一下查询数据

             db.transaction(function (tx) {
                 tx.executeSql('SELECT * FROM INFO WHERE id = ?', [1], function (tx, results) {
                     let len = results.rows.length, i;
                     console.log(len);
                     console.log(results.rows);
                 }, null);
             },function (err) {
                 console.log(err);
             });
    

    这就是查询数据 需要传入SQL语句 如果有占位符的话需要在第二个参数传递 ?就是占位符 参数传递要和?出现的顺序一致哦~ 回调函数就是 对应的结果集 和 事务对象啦 我们有了tx对象还可以继续查询

    我们来看一下删除

             db.transaction(function (tx) {
                 tx.executeSql('DELETE FROM  INFO WHERE id = ?', [1]);
             },function (err) {
                 console.log(err);
             });
    

    以上代码就是删除 语句则是对应的删除的SQL语句 会删除表中的数据 占位符还是和查询的意思一样

    更新数据

             db.transaction(function (tx) {
                 tx.executeSql('UPDATE INFO SET name="lwx" WHERE id=2');
             });
    

    这就修改了数据 更换为修改的SQL语句

    在这里插入图片描述
    我们看到数据就发生变化了

    下一篇

    结语

    好了 这就是基本的websql的使用 ~~~

    展开全文
  • Web Sql Database又名html5本地数据库,是随着HTML5规范加入的在浏览器端运行的轻量级数据库。在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端...

    Web Sql Database又名html5本地数据库,是随着HTML5规范加入的在浏览器端运行的轻量级数据库。在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的负担,使Web时代重新回到了“客户端为重,服务器为轻”的时代。可以看出,它的用途还是很大的,像对于一些经常需要检索的数据,可以先将其从后台取出,保存到web sql Database中,下次再使用的时候,就不需要再到后台检索了,从而减少对服务器的请求次数,还有就是可以通过web sql Database来做一些离线操作,因为数据已经保存在web sql Database中了。

    Web Sql Database的API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。学过数据库的人使用web sql数据库时,就会发现其实它非常有趣,因为你会发现它的存储风格跟我们的mysql之类的数据库很类似,你可以像操作mysql之类的数据库一样操作本地的数据库,很容易上手。虽然 W3C 官方在 2011 年 11 月声明已经不再维护 Web SQL Database 规范,但由于其广泛的实现程度,了解这些 API 对 Web 开发还是非常有必要的。

    Web Sql Database VS indexedDB

    机智的小伙伴或许已经看出来了,Web Sql Database虽然也是一种在浏览器里存储数据的技术,跟IndexedDB不同的是,WebSQL数据库更像是关系型数据库,而看过我前一篇文章的同学应该清楚,IndexedDB更像是一个NoSQL数据库,使用SQL查询数据,而我们的项目中,恰好很多地方都要做这种关联查询,所以WebSQL 数据库更加适合我们,其实indexedDB也是很好,很强大的!毕竟indexedDB才是现在W3C力荐的啊。

     

    核心方法

    以下是规范中定义的三个核心方法:

    1. openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
    2. transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
    3. executeSql:这个方法用于执行实际的 SQL 查询。

    打开数据库

    我们可以使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库,使用代码如下:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    

    openDatabase() 方法对应的五个参数说明:

    1. 数据库名称
    2. 版本号
    3. 描述文本
    4. 数据库大小
    5. 创建回调

    第五个参数,创建回调会在创建数据库后被调用。

    执行查询操作

    执行操作使用 database.transaction() 函数:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    db.transaction(function (tx) {  
       tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    });
    

    上面的语句执行后会在 'mydb' 数据库中创建一个名为 LOGS 的表。

    插入数据

    在执行上面的创建表语句后,我们可以插入一些数据:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    db.transaction(function (tx) {
       tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
       tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "夜鹰教程")');
       tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.yyjcw.com")');
    });
    

    我们也可以使用动态值来插入数据:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    db.transaction(function (tx) {  
      tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
      tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
    });
    

    实例中的 e_id 和 e_log 是外部变量,executeSql 会映射数组参数中的每个条目给 "?"。

    读取数据

    以下实例演示了如何读取数据库中已经存在的数据:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
     
    db.transaction(function (tx) {
       tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
       tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
       tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
    });
     
    db.transaction(function (tx) {
       tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
          var len = results.rows.length, i;
          msg = "<p>查询记录条数: " + len + "</p>";
          document.querySelector('#status').innerHTML +=  msg;
        
          for (i = 0; i < len; i++){
             alert(results.rows.item(i).log );
          }
        
       }, null);
    });


     
    完整实例
     
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    var msg;
     
    db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
        tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
        tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
        msg = '<p>数据表已创建,且插入了两条数据。</p>';
        document.querySelector('#status').innerHTML =  msg;
    });
     
    db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
        var len = results.rows.length, i;
        msg = "<p>查询记录条数: " + len + "</p>";
        document.querySelector('#status').innerHTML +=  msg;
     
        for (i = 0; i < len; i++){
            msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
            document.querySelector('#status').innerHTML +=  msg;
        }
    }, null);
    });
    

      

    转载于:https://www.cnblogs.com/yyjcw/p/10219479.html

    展开全文
  • 数据库:sqlserver2008-r24. web服务器:tomcat以上软件请务必全部下载安装。二.开发环境1.jdk配置首先安装好jdk,我一般使用1.8版本的jdk。配置好JDK环境变量。jdk下载,包含jdk1.7和jdk1.8,32位(i586)和64位(x64...

    一.必备软件

    1. java运行环境:jdk

    2. java开发编辑器:eclipse

    3. 数据库:sqlserver2008-r2

    4. web服务器:tomcat

    以上软件请务必全部下载安装。

    二.开发环境

    1.jdk配置

    首先安装好jdk,我一般使用1.8版本的jdk。配置好JDK环境变量。

    jdk下载,包含jdk1.7和jdk1.8,32位(i586)和64位(x64),请看清楚再下载,下载地址如下:

    或者官网下载:

    jdk1.7下载,下载需要登录oracle账户,地址如下:

    jdk1.8下载,地址如下

    安装参考文档如下:

    2.安装eclipse

    我一般使用mar2版本。请自行选择32位或者64位下载。

    官网下载地址如下:

    eclipse为免安装软件,下载到某个目录,解压就好了,发送快捷方式到桌面。

    注意eclipse的版本必须和JDK版本一致,即eclipse必须保持和JDK同时是 32位或者64位,否则会打不开或者报错。

    3.sqlserver安装

    sqlserver一般安装sqlserver2008-r2版本的。

    由于sqlserver的安装步骤比较多,安装过程中容易出现失误,导致安装失败,下面提供卸载步骤:

    4. eclipse配置tomcat

    tomcat版本一般选择8.0.47的版本。请下载8.0.47的版本。

    tomcat为免安装版本,下载之后无需安装,直接解压到某个盘的根目录即可。

    三.项目配置

    1.项目导入

    File → Import → General → Existimg Project Into Workspace

    2. 项目配置

    选中项目,右键→Properties→Java Build Path,检查项目是否存在Jar包缺失,一般不会存在,以防万一。

    3. 项目乱码问题

    一般来说,项目不会存在乱码问题,如果存在中文乱码,请修改编码,操作如下:选中项目,右键→Properties→Resource,text file     encodeing,选择对应的编码格式,一般来说都是UTF-8。

    四.数据库配置

    1.sqlserver数据库附加

    安装完sqlserver后,登陆数据库系统,选中数据库,右键→附加→添加.sql文件→确定,这样就导入了sql。

    五.详细部署教程

    详细部署教程,见如下演示视频:

    Note:项目在第一次成功部署之后,下次启动请注意:

    ff82906c90af3214c4d6e958a271e6ed.png

    Tags:

    开发环境

    转载:感谢您对【当牛作码】资源平台的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源当牛作码”。http://www.xiaoniucr.com

    展开全文
  • Web SQL 数据库 API 并不是 HTML5 规范的一...你也可以参考我们的 SQL 教程,了解更多数据库操作知识。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。核心方法以下是规范中定义的三个核心...

    Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。

    如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。

    你也可以参考我们的 SQL 教程,了解更多数据库操作知识。

    Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

    核心方法

    以下是规范中定义的三个核心方法:

    openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

    transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。

    executeSql:这个方法用于执行实际的 SQL 查询。

    打开数据库

    我们可以使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库,使用代码如下:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

    openDatabase() 方法对应的五个参数说明:

    数据库名称

    版本号

    描述文本

    数据库大小

    创建回调

    第五个参数,创建回调会在创建数据库后被调用。

    执行查询操作

    执行操作使用 database.transaction() 函数:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

    db.transaction(function (tx) {

    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

    });

    上面的语句执行后会在 'mydb' 数据库中创建一个名为 LOGS 的表。

    插入数据

    在执行上面的创建表语句后,我们可以插入一些数据:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

    db.transaction(function (tx) {

    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');

    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');

    });

    我们也可以使用动态值来插入数据:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

    db.transaction(function (tx) {

    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

    tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);

    });

    实例中的 e_id 和 e_log 是外部变量,executeSql 会映射数组参数中的每个条目给 "?"。

    读取数据

    以下实例演示了如何读取数据库中已经存在的数据:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

    db.transaction(function (tx) {

    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');

    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');

    });

    db.transaction(function (tx) {

    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

    var len = results.rows.length, i;

    msg = "

    查询记录条数: " + len + "

    ";

    document.querySelector('#status').innerHTML += msg;

    for (i = 0; i < len; i++){

    alert(results.rows.item(i).log );

    }

    }, null);

    });

    完整实例

    实例

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

    var msg;

    db.transaction(function (tx) {

    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');

    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');

    msg = '

    数据表已创建,且插入了两条数据。

    ';

    document.querySelector('#status').innerHTML = msg;

    });

    db.transaction(function (tx) {

    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

    var len = results.rows.length, i;

    msg = "

    查询记录条数: " + len + "

    ";

    document.querySelector('#status').innerHTML += msg;

    for (i = 0; i < len; i++){

    msg = "

    " + results.rows.item(i).log + "

    ";

    document.querySelector('#status').innerHTML += msg;

    }

    }, null);

    });

    尝试一下 »

    以上实例运行结果如下图所示:

    151918277_1_20190113072102365.jpg

    删除记录

    删除记录使用的格式如下:

    db.transaction(function (tx) {

    tx.executeSql('DELETE FROM LOGS WHERE id=1');

    });

    删除指定的数据id也可以是动态的:

    db.transaction(function(tx) {

    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);

    });

    更新记录

    更新记录使用的格式如下:

    db.transaction(function (tx) {

    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');

    });

    更新指定的数据id也可以是动态的:

    db.transaction(function(tx) {

    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);

    });

    完整实例

    实例

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

    var msg;

    db.transaction(function (tx) {

    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');

    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');

    msg = '

    数据表已创建,且插入了两条数据。

    ';

    document.querySelector('#status').innerHTML = msg;

    });

    db.transaction(function (tx) {

    tx.executeSql('DELETE FROM LOGS WHERE id=1');

    msg = '

    删除 id 为 1 的记录。

    ';

    document.querySelector('#status').innerHTML = msg;

    });

    db.transaction(function (tx) {

    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');

    msg = '

    更新 id 为 2 的记录。

    ';

    document.querySelector('#status').innerHTML = msg;

    });

    db.transaction(function (tx) {

    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

    var len = results.rows.length, i;

    msg = "

    查询记录条数: " + len + "

    ";

    document.querySelector('#status').innerHTML += msg;

    for (i = 0; i < len; i++){

    msg = "

    " + results.rows.item(i).log + "

    ";

    document.querySelector('#status').innerHTML += msg;

    }

    }, null);

    });

    展开全文
  • HTML4教程 上一篇 博主个人主页 博主视频教程
  • HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的。今天,我们一起来了解HTML 5的Web SQL Database API:open...
  • HTML5 Web SQL数据库

    2017-12-12 16:53:00
    HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,...你也可以参考我们的 SQL教程,了解更多数据库操作知识。 Web SQL 数据库可以在最新版的 Safari, Chrome 和 O...
  • HTML5 Web SQL 数据库

    2017-01-01 01:21:34
    HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入...你也可以参考我们的 SQL 教程,了解更多数据库操作知识。 Web SQL 数据库可以在最新版的 Safari, Chrome
  • 可是和成熟的dbms相比,websql还是比較弱的。最简单的一点来说。不支持id自增。 封装 封装了websql创建数据库。更新和查询操作: qiao.h.db = function(name, size){ var db_name = name ? name : 'db_test'...
  • WEB开发之SQLSERVER够用即可 2009年从事WEB全栈开发,没有受...
  • 滴石介绍滴石是用HBuilder...网址教程以后HBuilder开发app以滴石为例,做一个简单的app。功能介绍列表页列出要完毕的事项,详细功能:1.左滑待办事项,能够完毕待办事项2.点击待办事项,能够查看待办事项详情3.长...
  • HTML 5 Web SQL核心

    2012-05-25 16:51:04
    假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关的教程。 最新版本的Chrome,Safari和Opera浏览器都支持...
  • HTML5 Web SQL 数据库Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个...你也可以参考我们的 SQL 教程,了解更多数据库操作知识。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作...
  • 假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关的教程。最新版本的Chrome,Safari和Opera浏览器都支持Web ...
  • H5存储(web Storage和web SQL

    千次阅读 2017-07-07 10:18:51
    一、Web Storage教程 1、概述: 对于Web Storage来说,实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过Cookie,没关系,看了这篇文章照样轻松玩转Web ...
  • 假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关的教程。 最新版本的Chrome,Safari和Opera浏览器都支持Web...
  • 网络数据库SQL教程

    2010-05-08 09:33:25
    用于学习网络数据库SQL Server的,可以结合“WEB编程技术”……

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,671
精华内容 668
关键字:

websql教程