前端存储之 Web SQL

最新推荐文章于 2023-06-03 18:24:19 发布
最新推荐文章于 2023-06-03 18:24:19 发布
阅读量1.9k 收藏 6
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40222803/article/details/81129918
版权

web sql的简单的增删改查demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <style type="text/css">
        input {
            display: block;
        }
    </style>
</head>

<body>
    <input type="text" id="title" />
    <input type="text" id="content" />
    <input type="text" id="target_time" />
    <button type="button" id="add_plan">add</button>
    <button type="button" id="select">select</button>
    <button type="button" id="delete">delete</button>
    <button type="button" id="update">update</button>


    <script type="text/javascript">
        //          (function() {
        document.getElementById("add_plan").addEventListener('click', function() {
            var title = document.getElementById("title").value;
            var content = document.getElementById("content").value;
            var targetTime = document.getElementById("target_time").value;
            var createTime = new Date().getTime();
            var values = [title, content, targetTime, createTime];
            addPlan(values);
        });
        document.getElementById("select").addEventListener('click', function() {
            getPlanList();
        });
        document.getElementById("delete").addEventListener('click', function() {
            var title = document.getElementById("title").value;
            var values = [title];
            deletePlan(values);
        });
        document.getElementById("update").addEventListener('click', function() {
            var title = document.getElementById("title").value;
            var content = document.getElementById("content").value;
            var values = [content, title];
            updatePlan(values);
        });
        // 判定当前环境是否支持websql
        //              if(!window.openDatabase) {
        //                  console.log('当前环境不支持websql');
        //                  return;
        //              }

        var config = { //初始化websql数据库的参数信息
            name: 'my_plan',
            version: '',
            desc: 'manage my plans',
            size: 20 * 1024
        };
        var db = window.openDatabase(config.name, config.version, config.desc, config.size);

        crateTable(db);

        function errorCallback(error) {
            console.error('error:' + error.message);
        }

        function crateTable() {
            var sql = 'create table if not exists t_plan(title, content, target_time, create_time)';
            db.transaction(function(tx) {
                tx.executeSql(sql, null, function(tx, rs) {
                    console.log('执行sql成功');
                }, errorCallback);
            });
        }

        function addPlan(values) {
            var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';
            db.transaction(function(tx) {
                tx.executeSql(sql, values, function(tx, rs) {
                    var effectRow = rs.rowsAffected;
                    console.log('影响记录条数:' + effectRow);
                    effectRow && console.log('执行sql成功');
                }, errorCallback);
            });
        }

        function getPlanList() {
            var sql = 'SELECT * FROM t_plan';
            db.transaction(function(tx) {
                tx.executeSql(sql, null, function(tx, rs) {
                    console.log('list:' + rs.rows);
                    console.log('item:' + JSON.stringify(rs.rows.item(0)));
                }, errorCallback);
            });
        };

        function deletePlan(values) {
            var sql = 'DELETE FROM t_plan WHERE title = ?';
            db.transaction(function(tx) {
                tx.executeSql(sql, values, function(tx, rs) {
                    var effectRow = rs.rowsAffected;
                    console.log('影响记录条数:' + effectRow);
                    effectRow && console.log('执行sql成功');
                }, errorCallback);
            });
        }

        function updatePlan(values) {
            var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';
            db.transaction(function(tx) {
                tx.executeSql(sql, values, function(tx, rs) {
                    var effectRow = rs.rowsAffected;
                    console.log('影响记录条数:' + effectRow);
                    effectRow && console.log('执行sql成功');
                }, errorCallback);
            });
        }
        //          }());
    </script>
</body>

</html>

效果是

可以看到数据都存储起来了，而且就像mogoDB一样以键值对的形式存储

web sql 封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<script>
    var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是ios
    var isoVersion = navigator.userAgent.match(/(iPhone\sOS)\s([\d_]+)/)[2].replace(/_/g, '.'); //取出ios版本号
    var DB = {
        dbName: "cmpDB",
        slqVersion: (isIOS && isoVersion.split(".")[0] > 9) ? "1.0" : "1", //websql的版本号，由于ios的问题，版本号的写法不一样
        dbVersion: 1, //indexDB的版本号
        storeName: "cmpStore", //store----即“表”的名字
        indexedDB: window.indexedDB || window.webkitIndexedDB, //监听IndexDB
        db: {}, //缓存数据库，避免同一个页面重复创建和销毁
        store: null,
        errorCode: { //错误码
            open: 91001, //打开数据库失败的错误
            save: 91002, //保存数据失败的错误
            get: 91003, //获取数据失败的错误
            delete: 91004, //删除数据失败的错误
            deleteAll: 91005 //清空数据库失败的错误
        },
        createStore: function(dbName, callback) { //创建“表”
            var txn, store;
            if (DB.indexedDB) { //如果是支持IndexDB的
                txn = DB.db[dbName].transaction(DB.storeName, "readwrite"); //IndexDB的读写权限
                store = txn.objectStore(DB.storeName);
            } else { //如果不支持IndexDB 则使用websql
                store = DB.db[dbName].transaction(function(tx) {
                    tx.executeSql('create table if not exists ' + DB.storeName + ' (key text, value text null)', [], function(ts, result) {
                        callback && callback()
                    });
                });
            }
            return store;
        },
        open: function(callback, dbName) { //打开数据库
            if (DB.indexedDB) { //如果支持IndexDB
                if (!DB.db[dbName]) { //如果缓存中没有，则进行数据库的创建或打开，提高效率
                    var request = DB.indexedDB.open(dbName, DB.dbVersion);
                    request.onerror = function(e) {
                        callback({
                            code: DB.errorCode.open,
                            error: e
                        });
                    };
                    request.onsuccess = function(e) {
                        if (!DB.db[dbName]) {
                            DB.db[dbName] = e.target.result;
                        }
                        var store = DB.createStore(dbName);
                        callback(store);
                    };
                    request.onupgradeneeded = function(e) {
                        DB.db[dbName] = e.target.result;
                        var store = DB.db[dbName].createObjectStore(DB.storeName, {
                            keyPath: "key"
                        });
                        callback(store);
                    }
                } else { //如果缓存中已经打开了数据库，就直接使用
                    var store = DB.createStore(dbName);
                    callback(store);
                }
            } else {
                if (!DB.db[dbName]) {
                    DB.db[dbName] = openDatabase(dbName, DB.slqVersion, 'websqlDBl', 30 * 1024 * 1024);
                }
                DB.createStore(dbName, callback);
            }
        },
        save: function(key, value, callback) { //保存数据到数据库  key---数据key  value----数据值  callback----回调函数
            var dbName = DB.dbName;
            if (DB.indexedDB) {
                var inData = {
                    key: key,
                    value: value
                };
                DB.open(function(result) {
                    var error = result.hasOwnProperty("error");
                    if (error) {
                        callback && callback(result);
                    } else {
                        var request = result.put(inData);
                        request.onsuccess = function(e) {
                            callback && callback({
                                success: true
                            }); //保存成功有success 字段
                        };
                        request.onerror = function(e) {
                            callback && callback({
                                code: DB.errorCode.save,
                                error: e
                            });
                        }
                    }
                }, dbName);
            } else {
                value = JSON.stringify(value); //由于websql只能存字符串，所有将数据转成json字符串
                DB._websqldelete(key, function(result) { //存之前，先删除可能存在的key值
                    if (result.hasOwnProperty("error")) {
                        callback(result);
                    } else {
                        DB.db[dbName].transaction(function(ts) {
                            ts.executeSql("insert into " + DB.storeName + "(key,value) values(?,?) ", [key, value], function(ts, result) {
                                callback && callback({
                                    success: true
                                });
                            }, function(ts, e) {
                                callback && callback({
                                    code: DB.errorCode.save,
                                    error: e
                                });
                            });
                        });
                    }
                }, dbName);

            }
        },
        get: function(key, callback) { //根据key获取值
            var dbName = DB.dbName;
            if (DB.indexedDB) {
                DB.open(function(result) {
                    var error = result.hasOwnProperty("error"); //判断返回的数据中是否有error字段
                    if (error) {
                        callback(result);
                    } else {
                        var request = result.get(key);
                        request.onsuccess = function(e) {
                            var data = e.target.result ? e.target.result.value : undefined;
                            callback({
                                data: data,
                                success: true
                            });
                        };
                        request.onerror = function(e) {
                            callback({
                                code: DB.errorCode.get,
                                error: e
                            });
                        }
                    }
                }, dbName);
            } else {
                DB.open(function() {
                    DB.db[dbName].transaction(function(ts) {
                        ts.executeSql("select * from " + DB.storeName + " where key=? ", [key], function(ts, result) {
                            var data;
                            if (result) {
                                for (var i = 0; i < result.rows.length; i++) {
                                    data = result.rows.item(i)
                                }
                                if (data) {
                                    data = data.value;
                                    try {
                                        data = JSON.parse(data); //由于存的时候是转成json字符串，所以取得时候需要解析json
                                    } catch (e) {}
                                }
                            }
                            callback({
                                data: data,
                                success: true
                            });

                        }, function(ts, e) {
                            callback({
                                code: DB.errorCode.get,
                                error: e
                            });
                        });
                    });
                }, dbName);

            }

        },
        delete: function(key, callback) { //根据key删除某条数据
            var dbName = DB.dbName;
            if (DB.indexedDB) {
                DB.open(function(result) {
                    var error = result.hasOwnProperty("error");
                    if (error) {
                        callback && callback(result);
                    } else {
                        var request = result.get(key);
                        request.onsuccess = function(e) {
                            var recode = e.target.result;
                            if (recode) {
                                request = result.delete(key);
                            }
                            callback && callback({
                                success: true
                            });
                        };
                        request.onerror = function(e) {
                            callback && callback({
                                code: DB.errorCode.delete,
                                error: e
                            });
                        };
                    }
                }, dbName);
            } else {
                DB._websqldelete(key, callback, dbName); //使用websql的方式删除
            }

        },
        deleteAll: function(callback) { //清空数据库
            var dbName = DB.dbName;
            if (DB.indexedDB) {
                DB.open(function(result) {
                    var error = result.hasOwnProperty("error");
                    if (error) {
                        callback && callback(result);
                    } else {
                        result.clear();
                        callback && callback({
                            success: true
                        });
                    }
                }, dbName);
            } else {
                DB.open(function() {
                    DB.db[dbName].transaction(function(ts) {
                        ts.executeSql("delete from " + DB.storeName + "", [], function(ts, result) {
                            callback && callback({
                                success: true
                            });
                        }, function(ts, e) {
                            callback && callback({
                                code: DB.errorCode.deleteAll,
                                error: e
                            });
                        });
                    });
                }, dbName);

            }
        },
        _websqldelete: function(key, callback, dbName) { //私有方法，用于websql的删除
            DB.open(function() {
                DB.db[dbName].transaction(function(ts) {
                    ts.executeSql("delete from " + DB.storeName + " where key = ? ", [key], function(ts, result) {
                        callback && callback({
                            success: true
                        });
                    }, function(ts, e) {
                        callback && callback({
                            code: DB.errorCode.delete,
                            error: e
                        });
                    });
                });
            }, dbName);

        }
    };
</script>

</html>

他的效果是 

 

 

最帅程序员
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web-SQLi[i春秋][200pt]
Laurel_60的博客
08-04 1358
打开网址，是个登陆界面。 根据题目，第一反应–怕不是sql注入哦！经过尝试之后会发现，username=admin时，返回的是password error。ok，日常抓包，然后用intruder看看有没有字符被过滤掉。 事实证明，这个%有着大大的问题。拜读了网上的各种wp之后，原来是spintf()函数格式化字符串，导致了单引号逃逸。通过构造- - username=admin%1$\'...
WEB版SQL(MySql/SqlLite)管理器 可整合到后台
09-21
基于WEB的SQL(MySql/SqlLite)管理器。可整合到自己的后台程序中。多语言.. 图片预览:http://blog.csdn.net/wxy545812093/article/details/8003172
web sql与mysql_前端数据库——WebSQL和IndexedDB
weixin_27215403的博客
02-11 423
一、WebSQLWebSQL是前端的一个独立模块，是web存储方式的一种，我们调试的时候会经常看到，只是一般很少使用。并且，当前只有谷歌支持，ie和火狐均不支持。我们对数据库的一般概念是后端才会跟数据库打交道，进行一些业务性的增删改查。而这里的数据库也不同于真正意义上的数据库。废话少说，先出招吧：主要方法：openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。tra...
web 后端——SQL
qq_41956860的博客
03-04 365
文章目录ADOCURDcreateupdateretrievedelete表操作表修改表约束索引视图View其它datenull数据类型SQL 函数用户基本概念 参考：https://www.w3school.com.cn/sql/sql_quickref.asp ADO ADO 指 ActiveX 数据对象（ActiveX Data Objects）,是一个微软的 Active-X 组件,会随微...
十分钟了解websql和indexedDB
缘友一世的博客
06-15 3987
websql和indexed DB简介 1.7 删除数据 动态删除[删除指定的数据id也可以是动态的] 1.8 更新数据 id设置为动态 1.9 控制台输出 onupgradeneeded只在创建的时候触发，是唯一能声明表结构的地方。 createObjectStore方法只能在这个回调中使用 2.5 添加数据 2.6 修改数据 2.7 删除数据【该种删除只能删除一条数据，必须传入主键】 2.8 查询数据 2.9小结...
前端开源库-websql
08-30
websql 是一个前端开源库，它允许在浏览器环境中使用 SQL 数据库技术进行本地数据存储。在 Web 应用程序中，特别是在离线应用或者需要大量数据存储的场景下，WebSQL 提供了一个非常实用的解决方案。尽管现在更多的...
webSql/LocalStorage
04-19
WebSQL和LocalStorage是两种在...总的来说，WebSQL和LocalStorage是前端开发中的重要工具，它们使得Web应用能够提供离线体验，并在用户设备上持久化数据。了解并熟练掌握这两种技术，对于开发现代Web应用至关重要。
前端开源库-anysql-websql
08-30
本文将深入探讨一个名为“anysql-websql”的前端开源库，它是anysql API的一个Web SQL实现。Web SQL是一个浏览器内置的数据库系统，虽然在现代Web开发中已经不再被广泛推荐，但其在一些旧项目或特定需求中仍然有着...
vue+element-ui+websql
04-19
总的来说，"vue+element-ui+websql"的项目展示了如何利用现代前端技术栈结合本地存储实现一个功能完备的应用程序。Vue.js 和 Element-UI 提供了便捷的开发环境，而WebSQL和localStorage则解决了客户端数据持久化的...
jquery+easyui+websql.rar
04-19
当WebSQL不再推荐使用后，LocalStorage成为了很多前端存储的首选。 在这个项目中，jQuery负责处理DOM操作和Ajax请求，EasyUI则提供了用户界面组件，而WebSQL（或LocalStorage）作为前端数据库，用于在用户本地存储...
WEB页面执行SQL
05-15
WEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQL
WebSQL例子、webSQL 增删改查
07-06
解压即用。解压即用。解压即用。解压即用。解压即用。解压即用。
WebSQL 的简单使用
hedeqiang
09-02 1395
针对 极客时间 SQL 必知必会 课程进行总结 什么是 WebSQL 我想你一定知道 Local Storage 与 Session Storag，这些都是 H5 新增的属性，用于本地存储。存储方式为键值对的方式。 Web SQL是前端的数据库，它也是本地存储的一种，使用 SQLite 实现，SQL...
webSQL
ZcBob的博客
08-11 555
webSQL： 是一个操作数据库的对象，里面封装了操作数据库的方法，是通过sql语句操作数据库的（创建数据库、建表、增删改查）的字符串，类似正则的规则，他不会自己执行； 在webSQL里面有执行sql语句的方法，就会去执行sql里面描述的功能； webSQL跟sql语句是完全独立的两个东西（webSQL是前端独有的API，后者只要是sqlite类型的数据库都可以使用）； 特点：
Web前端之SQL（总结）
lb569484787的博客
08-20 4169
……看了w3cschool后的总结章。一些小总结。 w3c链接： ~ sql教程：https://www.w3school.com.cn/sql/index.asp ~ sql测试：https://www.w3school.com.cn/sql/sql_quiz.asp 总结： 一、SQL(Structured Query Language) 1.什么是 SQL？ SQL 指结构化查询语言 SQL...
一个超好用的Web SQL查询工具～
ylguoguo6666的博客
10-08 1612
Hue数据下载限制一般在10-20万行，但是这个工具数据不限行，这点真挺厉害的。下载方式有四种，结果导出有两种格式CSV或Excel，在线导出也就是如果是超大数据量，不会显示所有结果，就可以用在线导出。也可以保存已编辑的语句，直接双击复用，免去粘贴复制、方便快捷。当然除了用代码的方式，也可以直接右键查看数据、并且支持全屏查看结果，还挺人性化的。给大家介绍一款免费的SQL查询工具，很人性化，而且性能挺强大的。也可以在保存的查询中对已保存的SQL语句进行删除操做。点击执行查询数据仓库中的数据。
WEB入门——SQL注入（一）
最新发布
HasntStartIsOver的博客
06-03 1172
简单的SQL注入
Web SQL本地数据库（SQLLite）
忘川
12-12 3441
转载自https://blog.csdn.net/u013991521/article/details/51330260 在html5中，可以像访问本地文件那样轻松的对内置数据库进行直接访问。 html5中内置了两种数据库，一种为SQLLite,另一种为indexedDB。 在js中使用SQLLite数据库的步骤： 1.创建访问数据库的对象 var db = openDatabase(...
HTML5新特性 之 Web SQL
吴小迪的博客
11-28 2156
感谢内容提供者：金牛区吴迪软件开发工作室 文章目录前言：一、初步了解 Web SQL的使用1. 创建数据库2. 创建表并向表里新增数据3. 查询数据4. 修改数据5. 删除数据二、做一个 Todo List1. 创建一个简单的html页面2. 写js逻辑① 功能1：点击新增代办事项的时候出现modal② 新增代办事项③ 渲染代办事项列表④ 修改代办事项【包括更改描述以及更改状态】+ 删除代办事项 前言： 学习此内容需要事先掌握基本的 html、css、js 以及简单的 SQL。 SQL的学习：SQL与.
前端性能优化与Web安全策略详解
"本文主要探讨前端性能优化与Web安全，涉及UI优化、存储管理、网络通信、渲染效率提升以及各种Web安全威胁的防范措施。" 前端性能优化是提高用户体验的关键，它包括多个方面： 1. **UI篇**： - 图像选择：根据...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值