devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js 直接操作sqlite数据库demo_sqlite js

作者：羊村懒王 | 2024-02-14 12:44:40

赞

踩

sqlite js

朋友问我浏览器js直接sqlite怎么做。。。？
我一脸的懵逼。。。啥是sqlite。。。。？


然后各种查资料。。。终于有了这个demo。。。。


记录下，后面可能用的到。。。。。

  1. <html lang="en" dir="ltr">
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  5.     <meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
  6.     <title>宇宙已无对手的Demo演示 --- 功能强非常之大的评分 + 数据存储Sqlite Demo演示</title>
  7.     <script type="text/javascript" src="lib/jquery.min.js"></script>
  8.     <script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
  9. </head>
  10. <body>
  11. <div style="width:500px; margin:100px auto;">
  12.     <div class="demo">
  13.         <div style="padding-top: 20px;padding-bottom: 20px">主题：<input type="text" name="theme" id="theme"/></div>
  14.  
  15.         <div style="padding-top: 20px;padding-bottom: 20px ">
  16.             <div id="starView"></div>
  17.             <div id="function-hint" class="hint">请选择评分</div>
  18.         </div>
  19.  
  20.         <div style="padding-top: 20px ;padding-bottom: 20px">备注：<textarea id="remark" name="remark"></textarea></div>
  21.         <button id="save">保存</button>
  22.         <button id="read">读数据</button>
  23.  
  24.  
  25.     </div>
  26. </div>
  27. <div>
  28.     windows安装sqlite数据库教程：
  29.     <p>https://github.com/kripken/sql.js</p>
  30.     <p>http://www.runoob.com/sqlite/sqlite-installation.html</p>
  31.     <p>https://blog.csdn.net/chaishen10000/article/details/54574060</p>
  32.     <p>https://blog.csdn.net/u012562302/article/details/78362465</p>
  33.     星级评分：
  34.     <p>https://github.com/wbotelhos/raty</p>
  35.     <p>http://www.shouce.ren/example/try?pc=/api/jq/5733e33070c5a/index.html</p>
  36.     IE下使用Sqlite
  37.     <p>https://blog.csdn.net/fhl812432059/article/details/51502724</p>
  38. </div>
  39. <script type="text/javascript" src="./ie.js"></script>
  40. </body>
  41. </html>

ie.js

  1. $(function () {
  2.     function dbConnect(dbFile) {
  3.         var con = new ActiveXObject("ADODB.Connection");
  4.         con.ConnectionString = "DRIVER=SQLite3 ODBC Driver;Database=" + dbFile;
  5.         con.Open();
  6.         return con;
  7.     }
  8.  
  9.     var db = dbConnect("./test");
  10.  
  11.     // getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
  12.     var begin = new Date().getTime();
  13.     $('#starView').raty({
  14.         number: 5,//多少个星星设置
  15.         targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值
  16.         path: 'lib/raty/images',
  17.         hints: ['差', '一般', '好', '非常好', '全五星'],
  18.         cancelOff: 'cancel-off.png',
  19.         cancelOn: 'cancel-on.png',
  20.         size: 24,
  21.         starHalf: 'star-half.png',
  22.         starOff: 'star-off.png',
  23.         starOn: 'star-on.png',
  24.         target: '#function-hint',
  25.         cancel: false,
  26.         targetKeep: true,
  27.         targetText: '请选择评分',
  28.         precision: false,//是否包含小数
  29.         // score: 该字段是插件自带的一个hidden标签，name=score，如果不想用的话，可以自己配置click
  30.         click: function () {
  31.  
  32.         }
  33.     });
  34.  
  35.     $("#read").click(function () {
  36.         //查找数据
  37.         var objRs = db.Execute("SELECT * FROM test");
  38.         var rows = [];
  39.         while (!objRs.eof) {
  40.             var row = {};
  41.             for (var i = 0; i < objRs.fields.count; i++) {
  42.                 var field = objRs.fields(i);
  43.                 row[field.name] = field.value;
  44.             }
  45.             rows.push(row);
  46.             objRs.movenext();
  47.         }
  48.         console.log("共计：" + rows.length + "条数据")
  49.  
  50.         for (var i = 0; i < rows.length; i++) {
  51.             var row = rows[i];
  52.             console.log(row)
  53.         }
  54.     });
  55.     $("#save").click(function () {
  56.         var field = {};
  57.         $(".demo input,textarea").each(function () {
  58.             field[this.name] = '' + this.value;
  59.         });
  60.         field['begin'] = begin;
  61.         field['end'] = new Date().getTime();
  62.         // 计算开始时间和结束时间的毫秒差
  63.         field['time'] = field.end - field.begin;
  64.         console.log(field);
  65.  
  66.         // 保证列的顺序和value的顺序是一致的
  67.         var columns = ['theme', 'score', 'remark', 'begin', 'end', 'time'],
  68.             values = [];
  69.  
  70.         $(columns).each(function (idx, key) {
  71.             var v = field[key]
  72.             if (typeof(v) === "string") {
  73.                 values.push("'" + v + "'");
  74.             } else {
  75.                 values.push(v);
  76.             }
  77.         });
  78.         console.log(values);
  79.         // IE 特别之处
  80.         db.Execute("CREATE TABLE IF NOT EXISTS test (theme TEXT, score INTEGER, remark TEXT, begin INTEGER ,end INTEGER,time INTEGER);");
  81.         var insert = 'INSERT INTO test(theme, score, remark, begin,end,time) VALUES(' + values.join(",") + ')';
  82.         db.Execute(insert);
  83.     });
  84. });

chorme.js

  1. $(function () {
  2.     var db = window.openDatabase("./test", "1.0", "PhoneGap Demo", 200000);
  3.     if (!window.FileReader) {
  4.         alert("Not supported by your browser!");
  5.         return false;
  6.     }
  7.  
  8.     // getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
  9.     var begin = new Date().getTime();
  10.     $('#starView').raty({
  11.         number: 5,//多少个星星设置
  12.         targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值
  13.         path: 'lib/raty/images',
  14.         hints: ['差', '一般', '好', '非常好', '全五星'],
  15.         cancelOff: 'cancel-off.png',
  16.         cancelOn: 'cancel-on.png',
  17.         size: 24,
  18.         starHalf: 'star-half.png',
  19.         starOff: 'star-off.png',
  20.         starOn: 'star-on.png',
  21.         target: '#function-hint',
  22.         cancel: false,
  23.         targetKeep: true,
  24.         targetText: '请选择评分',
  25.         precision: false,//是否包含小数
  26.         // score: 该字段是插件自带的一个hidden标签，name=score，如果不想用的话，可以自己配置click
  27.         click: function () {
  28.  
  29.         }
  30.     });
  31.  
  32.     $("#read").click(function () {
  33.         //查找数据
  34.         db.transaction(function (tx) {
  35.             tx.executeSql('SELECT * FROM test', [], function (tx, results) {
  36.                 var rows = results.rows;
  37.                 console.log("共计：" + rows.length + "条数据")
  38.                 for (let i = 0; i < rows.length; i++) {
  39.                     var row = rows[i];
  40.                     console.log(row)
  41.                 }
  42.             }, null);
  43.         });
  44.     });
  45.     $("#save").click(function () {
  46.         var field = {};
  47.         $(".demo input,textarea").each(function () {
  48.             field[this.name] = '' + this.value;
  49.         });
  50.         field['begin'] = begin;
  51.         field['end'] = new Date().getTime();
  52.         // 计算开始时间和结束时间的毫秒差
  53.         field['time'] = field.end - field.begin;
  54.         console.log(field);
  55.         // 保证列的顺序和value的顺序是一致的
  56.         var columns = ['theme', 'score', 'remark', 'begin', 'end', 'time'],
  57.             values = [];
  58.         $(columns).each(function (idx, key) {
  59.             var v = field[key]
  60.             if (typeof(v) === "string") {
  61.                 values.push("'" + v + "'");
  62.             } else {
  63.                 values.push(v);
  64.             }
  65.         });
  66.         /*
  67.         columns.forEach(key => {
  68.             const v = field[key]
  69.             if (typeof(v) === "string") {
  70.                 values.push("'" + v + "'");
  71.             } else {
  72.                 values.push(v);
  73.             }
  74.         });
  75. */
  76.         console.log(values);
  77.  
  78.         db.transaction(populateDB, errorCB, successCB);
  79.  
  80.         // 填充数据库
  81.         function populateDB(tx) {
  82.             // tx.executeSql('DROP TABLE IF EXISTS test;');
  83.  
  84.             tx.executeSql("CREATE TABLE IF NOT EXISTS test (theme TEXT, score INTEGER, remark TEXT, begin INTEGER ,end INTEGER,time INTEGER);");
  85.  
  86.             const insert = 'INSERT INTO test(theme, score, remark, begin,end,time) VALUES(' + values.join(",") + ')';
  87.  
  88.             console.log(insert)
  89.             tx.executeSql(insert);
  90.             console.log("insert ok")
  91.         }
  92.  
  93.         // 事务执行出错后调用的回调函数
  94.         function errorCB(err) {
  95.             console.log("Error processing SQL: ", err);
  96.         }
  97.  
  98.         // 事务执行成功后调用的回调函数
  99.         function successCB() {
  100.             console.log("success!");
  101.         }
  102.  
  103.         //
  104.         // var data = db.export();
  105.         //
  106.         // var arraybuff = data.buffer;
  107.         //
  108.         // var blob = new Blob([arraybuff]);
  109.         //
  110.         // var url = window.URL.createObjectURL(blob);
  111.         //
  112.  
  113.     });
  114. });

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/80475
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号