uniapp使用本地存储（app）

最近在学习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
})

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

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

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

// 表名
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)
      },

这时我们调用 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)
      },
    })
  })
}

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

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

所有代码：

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}')`
  })
}