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/localforage@1.10.0/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>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海