Web SQL介绍,web sql中增删改查、数据存储位置、运行脚本、建表建库

Web SQL:

Web SQL是一种简单的存在服务器中的数据库,运行在javascript脚本中,其数据储存在计算机Application中Web SQL中。

web sql提供了三个核心方法:

1.openDatabase(‘dbname’,‘edition’,‘explain’,‘size’),此方法用于查找数据库,如果没有则会创建一个新的数据库,其参数依次代表:数据库名称,版本号,描述文本,数据库大小。

2.transaction(),用于控制一个数据库,里面传入一个函数,函数的参数作为操作数据库的对象。

3.executeSql(sql,),用于执行SQL语句;参数一表示执行的SQL语句;参数二表示行分隔符,当返回的结果有多行时,使用此参数做为行分隔符,一般情况下传入null或[],不传会报错;参数三可传入一个函数,函数的第二个参数则为数据对象;参数四为SQL语句查询时的参数,常用于where SQL语句查询。

web sql增删改查案例:

	<script>
        // 1.查询或创建一个web数据库:
        var db = openDatabase('mywebdbs', '1.0', 'Test DB', 1 * 1024 * 1024);
    
        // 2.transaction对数据库db进行操作,里面传入函数,函数参数为被操作对象:(数据库的增)
        db.transaction(function(dbtest) {
            // 1.通过executeSql执行SQL语句,create table if not exists CHART,来判断是否存在表CHART,不存在则创建名为CHART的表
            dbtest.executeSql('CREATE TABLE IF NOT EXISTS CHART (id unique, log)');
    
            // 2.通过executeSql执行SQL语句,向CHART表中插入一条数据结构为(id,log)值为(1,"hello word")的数据:
            dbtest.executeSql('INSERT INTO CHART (id,log) VALUES (1,"hello word")');
            dbtest.executeSql('INSERT INTO CHART (id,log) VALUES (2,"my name is jack")');
            // 扩展:dbtest.executeSql('INSERT INTO CHART (id,log) VALUES (?, ?)', [e_id, e_log]);里面的SQL语句为动态的插入数据
        });
    
        // 3.通过transaction对数据库db进行操作,里面传入函数,函数参数为被操作对象:(数据库的查(读))
        db.transaction(function(dbtest) {
            // 1.通过executeSql执行SQL语句:'SELECT * FROM CHART',表示从CHART表中查询所有数据,按照下下面方式接收处理数据(参数二不能省略,一般为[]或null),每组数据都是一个对象,可以通过console.log(results.rows)查看数据结构,
            dbtest.executeSql('SELECT * FROM CHART', null, function(dbtest, results) {
                // 2.results返回的是一个对象,其中属性rows里面存着插入的数据对象和length属性,因此可以通过results.rows.length来控制循环次数打印每个对象的数据
                for (var i = 0; i < results.rows.length; i++) {
                    console.log('id:' + results.rows[i].id + '--' + 'log:' + results.rows[i].log);
                };
            }, null);
        });
    
        // 4.通过transaction对数据库db进行操作,里面传入函数,函数参数为被操作对象:(数据库的改)
        db.transaction(function(dbtest) {
            // 1.通过executeSql执行SQL语句,'UPDATE CHART SET log='update logs!' WHERE id=1',表示从CHART表中根据id查询到该条数据,并修改log的值
            dbtest.executeSql('UPDATE CHART SET log="update logs!" WHERE id=2');
            // 扩展:dbtest.executeSql('UPDATE CHART SET log='新值' WHERE id=?', [id]),里面的SQL语句支持动态传入id值进行修改数据
        });
    
        // 5.通过transaction对数据库db进行操作,里面传入函数,函数参数为被操作对象:(数据库的删)
        db.transaction(function(dbtest) {
            // 1.通过executeSql执行SQL语句,'DELETE FROM CHART  WHERE id=1',表示从CHART表中根据id删除该条数据:
            dbtest.executeSql('DELETE FROM CHART  WHERE id=1');
            // 扩展:dbtest.executeSql('DELETE FROM CHART WHERE id=?', [id]),里面的SQL语句支持动态传入id值进行删除数据
        });
    script>

前端存储数据常见还有:
cookie: http做会话存储,存储在每次数据请求中,周期为一个会话结束。

session:http做会话存储,存储在服务端,比cookie安全。

localStorage:使用简单,但是数据大小5M内,数据永久存在浏览器,除非手动删除,否则不会自动删除。

sessionStorage、使用简单,但是数据大小5M内,临时存储,浏览器被关闭时自动删除数据。

indexedDB:存储空间大,但是操作繁琐不易上手,一般不太用。

localforage:一个 JavaScript 库,通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据,而不仅仅是字符串,且采用优雅降级的设计理念,当浏览器不兼容localforage时,它会使用localStorage, 缺点是需要手动下载引入项目(实际中不推荐使用),下面简单介绍下api:

 <!-- 使用localForage时先引入或模块化导入: -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/localforage.min.js"></script><script>
    // 1.setItem: 存储数据,第一个参数为存储的key值,参数二为数据(支持多种类型),返回一个Promise可以通过then异步在回调函数中干其他事
    localforage.setItem('key1', {naem: 'jack', age: 18}).then((res) => {
      console.log(res) // {naem: 'jack', age: 18}
    })
    // 也可以直接通过回调函数执行其他任务,但是回调函数参数是获取不到储存的值的:
    localforage.setItem('key2', 'hello word!', (res) => {
      console.log(res) // null
      localforage.getItem('key2', (err, value) => {  
        console.log(value) // hello word!
      })
    })

    // 2.getItem读取数据:参数一为key值,参数二为回调函数,回调函数中参数一为error对象,参数二为数据
    localforage.getItem('key2', (err, value) => {  
      console.log(value) // hello word!
    })
  </script>

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:[email protected]联系笔者 删除。
笔者:苦海

你可能感兴趣的:(html5,javascript,Web,SQL,前端,html5)