uniapp使用本地存储（app）_uniapp本地数据库

最近在学习uniapp，因为不会后端就有一个想法如何将数据储存在本地直接调用呢（仅学习，暂不考虑数据量多的时候的性能问题）。

首先我们先了解前端的本地存储有哪些：

1. webstorage
   webstorage分为localstorage和session storage
2. cookies
3. indexdb
4. websql（好像已经废除了）

但是这些都是基于浏览器来实现的存储，那么在使用 uniapp开发 app时该如何做到本地存储呢？下面就来介绍我们的主角plus.sqlite。
plus.sqlite是一个本地化的数据库，它可以使我能够使用 uniapp开发 app时达到本地存储的目的。
详细代码使用方法请查看gitee

我们先创建 一个数据库

const DBINFO = {
  name: 'bookdata', // 数据库名
  path: '_doc/bookdata.db', // 储存地址，通常都是存储在"_doc"目录下
}
const DB = plus.sqlite.openDatabase({ 
	...DBINFO
})
1
2
3
4
5
6
7

接下我们就可以调用了，但调用前我们还要判断一下数据库是不是已经打开了

// 判断数据库是否打开
export const isOpen = function(){
	return DB.isOpenDatabase({
		...DBINFO,
	})
}

1
2
3
4
5
6
7

然后我们就先给数据库了插如一条数据

// 表名
export const tableName = 'bookaccount'
// 表字段
export const CREATE_TABLE_SQL =
  'CREATE TABLE IF NOT EXISTS '+tableName+'(' +
	'id INTEGER PRIMARY KEY AUTOINCREMENT,' +
  'type INTEGER,' +
  'datetime TIMESTAMP,' +
  'pay REAL,' +
  'earning REAL,' +
  'detail TEXT,' +
  'channel INTEGER' +
  ');'
insertRowData: function(item) {
	return `insert into ${tableName}(type,datetime,pay,earning,detail,channel) values('${item.type}','${item.datetime}',${item.pay},${item.earning},'${item.detail}','${item.channel}')`
	},
	
DB.executeSql({ 
      name: DBINFO.name,
      sql, // 将 insertData传入插入一条数据
      success(e) {
        resolve(e)
				console.log('数据库操作成功了')
      },
      fail(e) {
        reject(e)
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这时我们调用 insertRowData方法就能向数据库插入一条数据了,
plus.sqlite还提供了增删改查的 api

// 查询
// 查询表中所有数据sql:'select * from bookdata'
export function query(sql) {
  return new Promise((resolve, reject) => {
    DB.selectSql({
      name: DBINFO.name,
      sql,
      success(data) {
        resolve(data)
      },
      fail(e) {
        reject(e)
        console.log(e)
      },
    })
  })
}
// 增/删/改
export function execute(sql) {
  return new Promise((resolve, reject) => {
    DB.executeSql({
      name: DBINFO.name,
      sql,
      success(e) {
        resolve(e)
				console.log('数据库操作成功了')
      },
      fail(e) {
        reject(e)
      },
    })
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在不需要使用的时候我们还能关闭数据库

// 关闭数据库
export const closeDb = function () {
	DB.closeDatabase({
	  ...DBINFO,
	})
}

1
2
3
4
5
6
7

所有代码：

import dayjs from 'dayjs';
// #ifdef APP-PLUS
// 数据库名和路径
const DBINFO = {
  name: 'bookdata',
  path: '_doc/bookdata.db',
}
const DB = plus.sqlite
// 表名
export const tableName = 'bookaccount'
// 表字段
export const CREATE_TABLE_SQL =
  'CREATE TABLE IF NOT EXISTS '+tableName+'(' +
	'id INTEGER PRIMARY KEY AUTOINCREMENT,' +
  'type INTEGER,' +
  'datetime TIMESTAMP,' +
  'pay REAL,' +
  'earning REAL,' +
  'detail TEXT,' +
  'channel INTEGER' +
  ');'
	
export const sqlMap = {
	// sql 查询所有表中数据
	queryAllSql: `select * from ${tableName}`,
	// // sql 插入一整行数据
	insertRowData: function(item) {
		return `insert into ${tableName}(type,datetime,pay,earning,detail,channel) values('${item.type}','${item.datetime}',${item.pay},${item.earning},'${item.detail}','${item.channel}')`
	},
	// 按时间查询数据并关联channel
	queryforTimeOrConstSql: function(beginTime = new Date().getTime(), endTime = new Date().getTime(),obj) {
		let sqlStr = ''
		if(obj.val === 0) {
		 sqlStr = `SELECT * FROM ${tableName} WHERE datetime >= ${beginTime} AND datetime < ${endTime}`
		} else {
		 sqlStr = `SELECT * FROM ${tableName} WHERE datetime >= ${beginTime} AND datetime < ${endTime} AND ${obj.key} = ${obj.val}`
		}
		return sqlStr
	},
	// 删除所有数据
	delAllData: `DELETE FROM ${tableName}`,
	// 查询最早的数据(按数据时间)
	queryOlderDate: `SELECT * FROM ${tableName} ORDER BY datetime ASC LIMIT 1`,
}	


// 判断数据库是否打开
export const isOpen = function(){
	return DB.isOpenDatabase({
		...DBINFO,
	})
}


// 关闭数据库
export const closeDb = function () {
	DB.closeDatabase({
	  ...DBINFO,
	})
}

//  数据库初始化
export function initDatabase() {
  return new Promise((resolve, reject) => {
    DB.openDatabase({
      ...DBINFO,
      success(e) {
        resolve(execute(CREATE_TABLE_SQL))
				
      },
      fail(e) {
        reject(e)
      },
    })
  })
}

// 查询
// 查询表中所有数据sql: 'select * from bookdata'
export function query(sql) {
  return new Promise((resolve, reject) => {
    DB.selectSql({
      name: DBINFO.name,
      sql,
      success(data) {
        resolve(data)
      },
      fail(e) {
        reject(e)
        console.log(e)
      },
    })
  })
}

// 增/删/改
export function execute(sql) {
  return new Promise((resolve, reject) => {
    DB.executeSql({
      name: DBINFO.name,
      sql,
      success(e) {
        resolve(e)
				console.log('数据库操作成功了')
      },
      fail(e) {
        reject(e)
      },
    })
  })
}

// #ifdef APP-PLUS



// 造数据
const typeList = ['收入', '支出']
const generateOneData = () => {
  const type = typeList[Math.floor(Math.random() * 2)]
  const channel = Math.floor(Math.random() * 10)
  const datetime = dayjs(new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * Math.floor((Math.random()*10000))).getTime()).valueOf()
  const pay = Math.round(Math.random() * 1000)
  const earning = type === '收入' ? pay : 0

  return {
    type,
    datetime,
    pay,
    earning,
    detail: `摘要_${Math.round(Math.random() * 100)}`,
    channel,
  }
}
export const generateList = (n) => {
  const list = []
  for (let i = 0; i < n; i++) {
    list.push(generateOneData())
  }
  return list
}
export function generateListInsertSql(n) {
  const list = generateList(n)
  return list.map((item,i) => {
    return `insert into ${tableName}(type,datetime,pay,earning,detail,channel) values('${item.type}',${item.datetime},${item.pay},${item.earning},'${item.detail}','${item.channel}')`
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148