精华内容
下载资源
问答
  • Web SQL数据存储

    2019-04-24 19:42:44
    虽然Web SQL API 已经被废除,但我们了解一下也是没错的。 核心的三大方法: ● openDatabase():这个方法使用现有数据库和新创建的数据库来创建数据库对象 ● transaction(): 执行事务处理。防止在对数据库进行访问...

    虽然Web SQL API 已经被废除,但我们了解一下也是没错的。

    核心的三大方法:

    ● openDatabase():这个方法使用现有数据库和新创建的数据库来创建数据库对象
    ● transaction(): 执行事务处理。防止在对数据库进行访问及执行有关操作时受到外界干扰。
    ● executeSql():创建数据库表,也可以执行、增删查改等数据操作。

    打开数据库

    openDatabase()方法:返回一个数据库对象,接受5个参数:
    1:数据库名字
    2:数据库版本
    3:数据库说明
    4:数据库保存数据的大小
    5:回调函数:在数据库创建之后会执行(非必须)

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

    事务

    通过事务对数据库进行操作

    transaction()方法:通过返回的数据库对象调用,接受3个参数:
    1:callbackFun: 执行访问数据库的SQL语句操作的一个函数
    2: errorCallbackFun:发生错误时调用的回调函数(可选)
    3: successCallbackFun: 执行成功时的回调函数(可选)``
    db.transaction(callbackFun,errorCallbackFun,successCalbackFun);
    transaction()中需要传入一个事件参数tx;

     db.transaction(function(tx){
            tx.executeSql('CREATE TABLE IF NOT EXISTS testTable(id,name)');
            tx.executeSql('INSERT INTO testTable  VALUES(?,?)', ['0',"Byron"]);
            tx.executeSql('INSERT INTO testTable  VALUES(?,?)', ['1',"Casper"]);
            tx.executeSql('INSERT INTO testTable  VALUES(?,?)', ['2',"Frank"]);
        });
    
    

    数剧操作

    executeSql()方法:执行SQL语句,事件参数tx有一个executeSql()方法,调用它可以执行SQL语句。
    接受4个参数: tx.executeSql(sqlstring,[],dataHandler,errorHandler);
    1:sqlstring: 查询的字符串,即要执行的SQL语句。如果有参数,用?代替
    2:[]:执行SQL语句时需要传入的参数,即sqlstring语句中使用?时所在处的字符串数据
    3: dataHandler: 执行成功时的回调函数。两个参数,1:tx对象 2:返回的查询到的结果数据集对象
    4: erroeHandler: 执行失败时的回调函数。两个参数与上面一样

    数据库的查询

      function getObjList(){
            db.transaction(function(tx){
            tx.executeSql('SELECT * FROM testTable',[],function(tx,results){
                var len = results.rows.length;
                console.log(len);
                for(var i = 0;i < len;i++)
                {
                    console.log('id:'+results.rows.item(i).id);
                    console.log('name:'+results.rows.item(i).name);
                }
            });
        });
        }  
    

    数据库的删除

     function delObj(objname){
            db.transaction(function(tx){
            tx.executeSql('DELETE FROM testTable WHERE name=?',[objname],function(){
                getObjList();     
            },function(tx,results){
                alert('删除过程中出现错误,错误原因'+results.massage);
            });
        });
        }
    
    展开全文
  • HTML5 web存储web SQL

    千次阅读 2016-07-06 18:34:27
    什么是web SQL?我们经常在应用程序中大量处理结构化数据,HTML5引入了web SQL database概念,它允许应用程序通过异步的Javascript接口来访问SQLlite数据库。但目前web SQL并不在HTML5的规范中,而是一个单独的规范,...

    什么是web SQL?

    我们经常在应用程序中大量处理结构化数据,HTML5引入了web SQL database概念,它允许应用程序通过异步的Javascript接口来访问SQLlite数据库。但目前web SQL并不在HTML5的规范中,而是一个单独的规范,Safari、Chrome、Oprea浏览器支持web SQL。

    三个核心方法

    Web SQL Database 规范中定义的三个核心方法:

    • openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象
    • transaction:这个方法允许我们根据情况控制事务提交或回滚
    • executeSql:这个方法用于执行SQL 查询

    openDatabase

    语法:var db = openDatabase(name,version,displayName,estimatedSize,creationCallback);
    name:数据库名字
    version:数据库版本号
    displayName:数据库描述
    estimatedSize:数据库保存数据大小,以字节为单位
    creationCallback:回调函数,非必须

    transaction

    transaction方法用以处理事务,当一条语句执行失败的时候,整个事务回滚。方法有三个参数:包含事务内容的一个方法、执行成功回调函数(可选)、执行失败回调函数(可选)。

    db.transaction(function (context) {
               context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
               context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
               context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
               context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
             });

    这个例子中我们创建一个表testTable,并在表中插入三条数据,四条执行语句任何一条出错,整个事务都会回滚。

    executeSql

    executeSql方法用以执行SQL语句,返回结果,方法有四个参数:
    - 查询字符串
    - 用以替换查询字符串中问号的参数
    - 执行成功回调函数(可选)
    - 执行失败回调函数(可选)
    语法:
    trans.executeSql(sql,[],function(){trans,data},function(trans,msg){});

    示例

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>web SQL demo</title>
        <script src="jquery-3.0.0.min.js"></script>
        <script>
            //创建或连接数据库
            function getDb()
            {
                var db = openDatabase("data.db","1.0","demo",1024*1024);
                return db;
            }
            //初始化数据库
            function initDb()
            {
                var db = getDb();
                if(db == null)
                {
                    alert("你的浏览器不支持web SQL");
                    return null;
                }
                db.transaction(function(trans){
                    trans.executeSql("create table if not exists demo(name text null,title text null,content text null)",[],function(trans,result){},
                    function(trans,error){alert(error)})
                });
            }
    
            $(function(){
                    var db = getDb();
                    initDb();
                    $("#btnSave").click(function(){
                        var name = $("#name").val();
                        var title = $("#title").val();
                        var content = $("#content").val();
                        //执行sql脚本来插入数据
                        db.transaction(function(trans){
                            trans.executeSql("insert into demo(name,title,content)values(?,?,?)",
                                            [name,title,content],
                                            function(trans,success){},
                                            function(trans,error){alert(error);}
                                            );
                        showAll();
                        });
    
                    });             
                })
    
            //显示所有数据
            function showAll()
            {
                $("#tblData").empty();
                var db = getDb();
                db.transaction(function(trans){
                    trans.executeSql("select * from demo",[],function(trans,data){
                        //获取查询到的数据
                        if(data)
                        {
                            for(var i=0;i<data.rows.length;i++)
                            {
                                //获取一行json数据,将数据拼接成表格
                                appendDataToTable(data.rows.item(i));
                            }
                        }
                    },function(trans,error){alert(error);});
                });
            }
    
            function appendDataToTable(data)
            {
                var name = data.name;
                var title = data.title;
                var content = data.content;
                var strHtml = "";
                strHtml += "<tr>";
                strHtml += "<td>"+name+"</td>";
                strHtml += "<td>"+title+"</td>";
                strHtml += "<td>"+content+"</td>";
                strHtml += "</tr>";
    
                $("#tblData").append(strHtml);
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="name" id="name" required/></td>
            </tr>
            <tr>
                <td>标题</td>
                <td><input type="text" name="title" id="title" required/></td>
            </tr>
            <tr>
                <td>留言</td>
                <td><input type="text" name="content" id="content" required/></td>
            </tr>
        </table>
        <input type="button" value="保存" id="btnSave"/>
        <br/>
        <input type="button" value="展示所有数据" onclick="showAll();"/>
        <table id="tblData"></table>
    </body>
    </html>

    运行结果如下:
    这里写图片描述

    展开全文
  • websql的一些基本操作 我已经把项目打包到gitgub上面,可以直接访问的地址在下面 [在线测试地址] Web SQL 是在浏览器上模拟数据库,可以使用JS来操作SQL完成对数据的读写。 核心方法 以下是规范中定义...

    websql的一些基本操作


    我已经把项目打包到gitgub上面,可以直接访问的地址在下面
    [在线测试地址]
    这里写图片描述

    Web SQL 是在浏览器上模拟数据库,可以使用JS来操作SQL完成对数据的读写。

    核心方法

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

    • openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
    • transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
    • executeSql:这个方法用于执行实际的 SQL 查询。
    创建web数据库
    	        //创建名为mydb的数据库             版本    描述      大小
              this.db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    
    数据库中创建一张表
    //创建一个名为STUDENT的表,如果存在则不会创建
    this.db.transaction(function (tx) {
      tx.executeSql('CREATE TABLE IF NOT EXISTS STUDENT (id unique, name, sex, age)');
      tx.executeSql('INSERT INTO STUDENT (id, name, sex, age) VALUES (?, ?, ?, ?)',[1522813443000,'苏雨', '男', 20]);
      tx.executeSql('INSERT INTO STUDENT (id, name, sex, age) VALUES (?, ?, ?, ?)',[1522813443001,'苏苏', '女', 18]);
    });
    
    为student表添加两条数据
      tx.executeSql('INSERT INTO STUDENT (id, name, sex, age) VALUES ('1522813443000','苏雨', '男', 20));
      //动态插入数据 和平常操作数据库差不多
      tx.executeSql('INSERT INTO STUDENT (id, name, sex, age) VALUES (?, ?, ?, ?)',[1522813443001,'苏苏', '女', 18]);
    
    查询student表中的数据
        //查询student表
          get_data: function() {
            var arry = new Array()
            this.db.transaction(function (tx) {
              tx.executeSql('SELECT * FROM STUDENT', [], function (tx, results) {
                var len = results.rows.length, i;
                for (i = 0; i < len; i++){//把查出来的数据封装到一个对象里面 最后放到数组里面
                  let name = results.rows.item(i).name
                  let sex =  results.rows.item(i).sex
                  let age =  results.rows.item(i).age
                  let id =  results.rows.item(i).id
                  var o = new Object()//创建一个js对象
                  o.name = name
                  o.age = age
                  o.id = id
                  o.sex = sex
                  arry.push(o)
                }
              }, null);
            });//将数组赋值给vue创建的数组
            this.values = arry
          }
    
    通过id删除student中的某条数据
    	//删除student中的某条数据
          remove_data: function (index,row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.db.transaction(function(tx) {                   //id参数
                tx.executeSql('DELETE FROM STUDENT WHERE id = ?',[row.id]);
              })
              this.get_data()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
    
    通过id修改student中数据的信息

    仔细看就能发现websql和我们平常mysql操作数据差不多

        update_date: function () {
          let name = this.upstu.name
          let sex = this.upstu.sex
          let age = this.upstu.age
          let id = this.upstu.id
          this.db.transaction(function (tx) {
            tx.executeSql('UPDATE STUDENT SET name = ?,sex = ?,age=? WHERE id=?',[name,sex,age,id]);
          })//动态获取数据
          this.get_data()
          this.editDialogVisible = false
          }
    

    源码地址: [https://github.com/niezhiliang/websql

    展开全文
  • Web存储——Web SQL的使用(一)

    千次阅读 2016-03-10 20:26:12
    Web SQL

    Web SQL

    1.Web SQL的兼容性与基本特点

    1.1 兼容性

    各个浏览器对Web SQL的支持情况
    Web SQL的兼容性并不是特别理想,仅chrome ,safari,opera 10.5+等浏览器支持。

    归咎其原因,主要是因为 Web SQL Database API 实际上并不包含在 HTML5 规范之中。它是一个独立的规范,它引入了一套使用 SQL 操作客户端数据库的 API。其规范已经被停止更新了,所以大多数浏览器并不支持。

    1.2 主要特点
    Web SQL相对于 sessionStorage ,locationStorage最大的优势 :

    1. 能方便的进行对象存储
    2. 能进行大量的数据的处理

    2.Web SQL的核心方法

    Web SQL Database 规范中定义的三个核心方法:

    1. openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象
    2. transaction:这个方法允许我们根据情况控制事务提交或回滚
    3. executeSql:这个方法用于执行真实的 SQL 查询

    3.Web SQL的基本代码实现

    3.1 创建或打开数据库

      openDatabase(databasename,version,description,size);

    几个参数意义分别是:
    1. 数据库名称。
    2. 版本号。
    3.对数据库的描述。
    4.设置数据的大小。
    5.回调函数(可省略)。
    初次调用时创建数据库,以后就是建立连接了。

    //创建web SQL数据库
    //Chrome 和 Opera 和Safari 支持,其余大多数不支持(web SQL已经被废弃)
    var mydb = {};
    mydb.createDB = function(){
        mydb.dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
        if (!mydb.dataBase) {
            console.log("数据库创建失败!");
        } else {
            console.log("数据库创建成功!");
        }
    };

    3.2 定义数据表内容和格式

    “create table if not exists stu (存储名 存储格式,存储名 存储格式…… ) values(?,?,…….)” []

    //创建数据表
    mydb.createTable=function() {
        mydb.dataBase.transaction( function(tx) {
            tx.executeSql(
                "create table if not exists stu (name TEXT, sex INT, number REAL UNIQUE, chinese FLOAT, math FLOAT, english FLOAT, science FLOAT,sum FLOAT,average FLOAT)",
                [],
                function(tx,result){ console.log('创建stu表成功'); },
                function(tx, error){ console.log('创建stu表失败:' + error.message);
                });
        });
    };

    3.3 添加一项表格数据

    //添加信息
    mydb.insert = function (obj,add_flag) {
        mydb.dataBase.transaction(function (tx) {
            tx.executeSql(
                "insert into stu(name,sex,number, chinese,math,english,science,sum,average) values(?,?,?,  ?,?,?,?,?,?)",
                [obj.username, obj.sex, obj.number, obj.chinese,obj.math,obj.english,obj.science,obj.sum,obj.average],
                function (){
                 console.log('添加数据成功');
                },
                function (tx, error) {
                  console.log('添加数据失败: ' + error.message);
                }
            );
        })
    };

    3.4 根据 number/id 删除一项数据

    //删除数据
    mydb.delete = function (number) {
        mydb.dataBase.transaction(function (tx) {
            tx.executeSql(
                "delete from stu where number= ?",
                [number],
                function (tx, result) {
                    console.log('删除完成');
                },
                function (tx, error) {
                    console.log('删除失败: ' + error.message);
                });
        });
    };

    3.5 根据 number/id 查询某一项数据

    //查询数据
    mydb.search = function (number) {
        mydb.dataBase.transaction(function (tx) {
            tx.executeSql(
                "select * from stu where number = ?", [number],
                function (tx, result) {
                    //执行成功的回调函数
                    if(result.rows.length == 0){
                        console.log('该信息不存在');
                    }else {
                        console.log('查询成功');
                    }
                },
                function (tx, error) {
                    console.log('查询失败: ' + error.message);
                });
        });
    };

    3.6 根据 number/id 更新某一项数据

    //更新数据
    mydb.update = function (obj) {
        mydb.dataBase.transaction(function (tx) {
            tx.executeSql(
                "update stu set " + "name=?,sex=?,chinese=?,math=?,english=?,science=?,sum=?,average=? where number= ? ",
                [obj.username,obj.sex,obj.chinese,obj.math,obj.english,obj.science,obj.sum,obj.average,obj.number],
                function (tx, result) {
                    console.log('更新成功');
                },
                function (tx, error) {
                    console.log('更新失败: ' + error.message);
                });
        });
    };

    3.7 删除整个数据表内容

    //删除数据表内容
    mydb.dropTable = function () {
        mydb.dataBase.transaction(function (tx) {
            tx.executeSql('drop table stu');
        });
    };
    
    
    
    

    4.在使用中需要注意的事项

    4.1
    测试过程中,发现在查询和更新方法中,返回总是查询成功或更新成功(尽管数据并不存在)。这样便不能用回调函数来判断数据是否真的存在。
    还好在回调函数的参数result.rows可以看到其数组大小

         function (tx, result) {
                    //执行成功的回调函数
                    if(result.rows.length == 0){
                        console.log('该信息不存在');
                    }else {
                        console.log('查询成功');
                    }
        }

    根据其数组的大小便可判断数据是否存在(对于避免重复输入同一number的学生起到了至关重要的作用)。

    4.2
    还有一点 我们的数据表到底存放在电脑的哪里呢?
    拥有电脑洁癖个性的我肯定要把它放入回收站了!

    chrome一般存放在C:\Users\AppData\Local\Google\Chrome\User Data\Default\databases 下

    4.3
    关于第3小节内的最后一个方法 mydb.dropTable();并不能删除其表格,只是单纯的删除了其表格内容。(数据库方面个人不是特别懂,请谅解)

    总结

    Web SQL操作很方便 ,其缺点就是兼容性太差了。其次在网上也看到其安全性并不是十分高。下一章 我将分析IndexedDB的特点和使用。那么到底哪个更加有优势呢?

    展开全文
  • Web SQL

    2019-11-29 22:40:03
      这个结果将一直保存,即使关掉网页重新打开,打开数据库后仍能得到以前操作的结果,但是当你清理浏览器缓存之后,这个结果就不在了,所以我认为其实webSQL就是讲cookie组织为数据库的结果!!!   下面是运行...
  • websql

    2016-01-14 14:58:22
    chrome浏览器的websql用于在客户端创建数据库,暂时存储数据。只在当前页面有效,页面刷新后websql被清空。以下是websql的使用方式: var db = openDatabase ('mydatabase', '2.0', 'my db', 2 * 1024);//...
  • Web SQL是一种简单的存在服务器中的数据库,运行在javascript脚本中,其数据储存在计算机Application中Web SQL中。 web sql提供了三个核心方法: 1.openDatabase(‘dbname’,‘edition’,‘explain’,‘size’),此...
  • web SQL

    千次阅读 2014-10-13 14:02:16
    创建数据库 function Database() { if (!... alert('您的浏览器不支持Web Sql。'); return;  } try { this.dbInstance = window.openDatabase('wecity', '1.0', 'wecity offline databas
  • 如果是要本地浏览器保存复杂的数据,则可以借助Web SQL Database API来实现,可以使用的SQL语句完场复杂数据的存储与查询。 Web SQL Database 规范使用的是SQLite数据库,它允许应用程序通过一个异步的JavaScripte...
  • 在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就无能为力了,灵活大不够强大。 Web SQL Database ...
  • 前端存储websql

    万次阅读 多人点赞 2016-08-12 17:21:29
    最近公司系统需要做一个app,经过...如果开发基于html5技术的手机app,也可以考虑用websql做本地存储,不过由于前面提到的原因,如果你的app考虑长远发展,建议使用IndexedDB。 参考文档 更多资料可以查询 ...
  • H5存储web Storage和web SQL

    千次阅读 2017-07-07 10:18:51
    对于Web Storage来说,实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过Cookie,没关系,看了这篇文章照样轻松玩转Web Storage。首先,学习Web Storage只需背...
  • webSql简单探究

    2017-05-27 17:40:17
    webSql简单探究 什么是webSql Web Sql Database,中文翻译作“本地数据库”,是随着HTML5规范加入的在浏览器端运行的轻量级数据库 在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须...
  • webSQL与indexedDB

    2019-06-07 08:48:50
    webSQL与indexedDB Web SQL Database 和 Indexed Database 简介 Web SQL Database 介绍 Web SQL Database API 实际上未包含在 HTML 5 规范之中,它是一个独立的规范,它引入了一套使用 SQL 操作客户端数据库的 API...
  • WebStorage和WebSQL

    2018-11-23 21:52:46
    早期,本地存储使用的是cookie,但是由于cookie的大小及安全性能等方面的局限性衍生出了web存储web存储的数据并不需要像cookie那般在每次请求中都与服务器交互,它将数据存储在本地。除此之外,它还也可以大量存储...
  • 前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端...所以我们就继续找,于是我们就找到了Web Sql Database,发现这个前端数据库是比较适合我们的项目的,于是果断转投Web Sql Database的怀抱,找...
  • Web SQL 学习笔记

    2020-12-24 16:17:01
    目前很少有大的互联网公司使用 Web SQL 进行数据存储,但是它在桌面应用(如:electron)以及手机应用中存储数据还是很香的。 1,创建数据库 方法:openDatabase 参数:(数据库名称 版本号 描述文本 数据库大小 创建回...
  • 要想使用Web Sql存储数据,首先要建立一个
  • HTML5开发学习:本地存储Web Sql Database

    千次阅读 2014-07-05 19:56:01
    Web SQL Database (目前只谷歌浏览器支持):我把它理解成一个Html5环境下可以用Js执行CRUD的Web数据库。 对于简单的数据,使用sessionStorage和localStorage能够很好地完成存取,但是对于处理复杂的关系型数据...
  • HTML5之WebSQL

    2017-07-04 22:36:18
    webStorage作为HTML5中重要的新概念之一,web Storage Database既轻量级数据库,它的出现大大提高的Web应用程序的性能,在...下面就来通过介绍一个WebSQL简单实例。让大家快速了解WebSQL的使用方法。三大核心方法op
  • webSQL基础JS库

    2017-01-08 21:13:40
    Web SQL基本操作封装成一个类
  • 浏览器存储滥用者是一种工具,可以在LocalStorage,SessionStorage,WebSQL数据库,IndexedDB API和FileSystem API上试验浏览器存储限制。 您可以将任意大小的文件添加到这些存储中,以查看其大小限制。 在Chrome或...
  • WebSQL 插入数据有上限

    千次阅读 2019-03-21 10:46:45
    Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作,混合开发中用来存储大量数据也非常高效和方便(Web SQL操作指南 摸我)。 复盘 项目需求一次要导入大量数据到应用程序中,数据的插入过程也很...
  • WebSQL详解WebSQL基本语法建立或打开WebSQL数据库由数据库发起一项事务建立数据表循环遍历查询某数据库表的值向某数据表中插入值删除某数据表中的值更新某数据库中的值WebSQL开发心得 WebSQL基本语法 WebSQL是一个轻...
  • 使用webSQL

    千次阅读 2018-03-15 17:09:51
    HTML5允许用户通过SQL访问本地数据库.... webSQL基础 html5新增了用户访问本地数据库地功能.数据库API的具体细节仍在完善. 使用webSQLHTML5数据库API是以一个独立规范形式出现,包含3个核心方法.openDatabase:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,078
精华内容 34,431
关键字:

websql存储的大小