前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。这几个场景用处很多,也非常的成熟好用。但是我还是想要一种能够长久的保存在本地的数据,类似数据库或者类似web sql。

新一代浏览器基本都支持了本地数据库,需要用的时候直接使用就好了。实在不行还可以使用Storage将就一下。

假如我需要的是一个数据库那种功能并且没有兼容的存储方式呢?加入我还要加密存储这些东西在本地呢?加入我要存的东西非常多呢?

目前我在使用ReactNative的时候确实遇到了这种情况。我需要将非常多的数据存在本地。有人说了,直接使用sqlite不就好了么?

好啊,完全可以啊。我这里仅仅是本着前端的态度去开发而已。假如有的同学不需要sqlite呢,只需要一个简单的,能够存储一些大量数据的方式呢?

使用场景可能有很多,实现的底层也可以随便替换,甚至实现方式都可以随便写写。这里我本着前端创造世界的态度来做一个非正式的、前端好使的数据存储库。

底层存储

这里的使用场景是ReactNative,所以我使用的是RN的AsyncStorage。

将所有要保存的数据转成对象,并转化为字符串。这里的核心思想就是序列化。将所有数据当成字符串来存。

import { AsyncStorage } from 'react-native'; exports.setItem = async (key, value) => { let item = JSON.stringify({ v: value }); return await AsyncStorage.setItem(key, item); }

当读取的时候也需要做一次转化,将字符串转成当初存入的数据。

exports.getItem = async (key) => { let item = await AsyncStorage.getItem(key); if (!item) { return null; } return JSON.parse(item).v || null; }

需要特殊处理的是列表的获取。RN有一个根据多个key返回多条数据的api。它返回的是一个数组对象,数组序号0是数据存储的key值,序号1才是数据存储的具体字符串。

exports.getlist = async (keys) => { let list = await AsyncStorage.multiGet(keys); list = list.map(item => JSON.parse(item[1]).v || null); return list; }

其他用到的几个方法也顺便拿出来吧。这里多嵌套一层,跟上面的保持队形。

exports.removeItem = async (key) => await AsyncStorage.removeItem(key); exports.removeItems = async (keys) => await AsyncStorage.multiRemove(keys); exports.allKeys = async () => await AsyncStorage.getAllKeys();底层优化

上面只是简单的实现,如果没有特殊需求也就差不多了。但是,想要更进一步的可以考虑开始优化了。

比如,优化json转化的速度。我们使用JSON对象的方法去转化的时候其实还有一个判断数值类型的过程。如果我们把数据的类型提前定义好。再转化的时候就不需要再判断了。

可以定义一个model对象,将这个表需要的字段预先定义好。可以查看一下Sequelize的定义方式。按照关系行数据库的方式来搞这个事情就很简单了。

//用户对象const users = db.define('t_users', { id: { type: Sequelize.INTEGER, primaryKey: true, }, //用户名 username: { type: Sequelize.STRING }, //密码 pwd: { type: Sequelize.STRING }, //状态 status: { type: Sequelize.INTEGER }, //昵称 nickname: { type: Sequelize.STRING }, //token token: { type: Sequelize.STRING }, create_time: { type: Sequelize.TIME } }, { freezeTableName: true, timestamps: false, });实现存储

我们这里参考一下关系型数据库的实现。

首先需要分表和分库。这样在存入数据的时候可以更少的关注这方面的信息,将主要精力放在数据操作上。

constructor(tableName = "table", db = "db") { //检查库,表是否存在 //初始化索引表 this.db = db; this.tableName = tableName; this.tableKey = db + "_" + tableName; this.init(); }

将它们分开存储在当前对象内部,在创建对象的时候就可以根据不同的库、表创建不同的操作方法。这里使用的是class,每个表都对应一个单独的对象。

由于我们使用的是RN提供的存储方法,所以这里的添加和更新其实是一个方法。在添加的时候会根据当前时间戳创建一个唯一id,使用这个id作为key存储在数据库中。所以在使用的时候不需要再单独存入id,不过如果你觉得这个id跟你需要的有差别也可以自己定义一个id来作为key值存储。

//添加和更新 async add(data = {}) { if (data.constructor !== Object) return; if (!data._id)data._id = uuid(); await setItem(this.tableKey + "_" + data._id, data); return data; }

在获取的时候单独提供了一个根据id获取的方式。这里考虑的是通过id获取非常的简单方便,对于某些数据完全可以快速读取,没必要一行一行的去查询。

/** * 通过id查询 * @param {*} id */async getById(id) { if (!id) return {}; return await getItem(this.tableKey + "_" + id); }

相对于根据id查询来说,模糊查询确实很慢,如果不是真实需要,还是不要使用这种模糊查询的好。这里提供了一个自定义查询的方法,可以根据返回的对象判断是否需要这行数据。同时也可以添加top参数来限制返回的数量。使用这个参数也可以在数据很多的时候提高性能。

/** * 通过过滤方法查询 * @param {*} fn */async get(fn, top = 0) { let keys = await allKeys(); if (keys.length == 0) return []; if (top > 0 && keys.length > top) keys.length = top; const listkey = keys.filter(item => item.indexOf(this.tableKey + "_") === 0); if (listkey.length == 0) return []; let list = await getlist(listkey); list = list.filter(item => fn(item)); return list; }

最后把删除和清空的方法加上,这样一个简单的删除库就完成了。

/** * 删除 * @param {*} id */async delete(id) { if (!id) return {}; await removeItem(this.tableKey + "_" + id); }/** * 清空表 */async clear() { let keys = await allKeys(); const listkey = keys.filter(item => item.indexOf(this.tableKey + "_") === 0); if (listkey.length == 0) return; removeItems(listkey); }