如何在Vue项目中使用websql数据库

*在移动端项目开发中，可能需要因为项目的特殊性需要在本地存储大量的数据，因为我选择使用websql数据库来实现大量数据的存储。

**对于一些懂数据库的可以很好的理解websql，说到底其实他就是一个存在于浏览器端的小型数据库

首先我们先构建自己的Vue项目，构建完成后。新建一个JS放在那里都可以。

比如我在Src目录下新建了一个webSql文件用来写我的数据库链接。
然后我们进入自己的websql.js文件,在头部引入Vue，然后定义一个websql变量，再export default出去。

然后我们需要在函数中检测，是否支持websql

openDatabase('mydb', '1.0', 'TextDb', 2 * 1024 * 1024);

这个方法就是开启数据库，建立数据库链接，数据库链接建立成功了以后我们就需要来创建数据库的表了，通过

transaction

方法来打开数据库的事务，然后用

executeSql

方法来写SQL语句，

transaction

有两个参数两个都是函数

function

第一个

function

写需要执行的

executeSql

方法，第二个

function

是执行失败的回调.

db.transaction(function (tx) {
`tx.executeSql('CREATE TABLE IF NOT EXISTS UserAdmin (userId unique,userName), [], function (tx, resultSet) {
}, function (tx, error) {
console.log('创建stu表失败:' + error.message);
});  });`

db.transaction(function(){},function(){})

第一个function执行创建数据库表的方法，第二个是创建失败的回调函数，其中参数

error.message

可以查看到失败的错误信息

所有的tx.executeSql执行数据库的方法外层都需要写db.transaction。数据库的表创建好了以后我们就可以在main.js中引入这个写好的websql了


然后用Vue.use注册一下websql这样我们每次进行启动项目的时候就会自动链接我们的数据库。

然后我们回到websql文件中，把链接挂载在Vue的prototype上就可以进行全局调用了。

比如我在Login.vue中使用可以通过

this.$db.transaction

方法来创建事务