专栏首页程序员的知识天地使用 JS 实现一个本地数据库
原创

使用 JS 实现一个本地数据库

前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在 Cookie 中,或者将 key 保存在 Cookie 中,将其他数据保存在服务器上。

这几个场景用处很多,也非常地成熟好用。但是我还是想要一种能够长久保存在本地的数据,类似数据库或者类似 Web SQL。

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

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

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

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

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

底层存储

这里的使用场景是 React Native,所以我使用的是 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);
}

使用的时候只需要创建对象,然后在需要的地方调用即可。使用起来简单又方便,再加上优化之后的情况甚至可以当成客户端的 Redis 来使用。

//初始化数据库let db=new JSDB();//添加一个自定义数据db.add({name:"test",key:"abc"});//根据id获取数据db.getById("1223467890");//根据条件查询数据db.get(d=>d.name==="test");//删除对应的数据db.delete("1223467890");//情况所有数据db.clear()

优化创建

首先要优化的就是对象的创建。每个对象创建其实都是一个很大的消耗,如果能把这个消耗降低岂不是美滋滋!

这里我们借鉴数据库池的概念,实现一个对象池的方法。在对象创建之后并没有直接返回,要在经过池的操作。

将对象放入池内,并在页面销毁的时候重置为一个空对象。下次请求创建的时候就不必再创建新的了。直接赋值表、库的名称就可以使用了。内存毫无变化,并且有点想笑。

优化查询

每次查询都需要去读 Stroage 还是很麻烦的,尤其这个操作是异步操作,是需要发消息到 Native 端的。

我们可以将上次读取的数据先存在一个变量中,如果下次还需要使用这行数据,就完全不需要再去读取了。这样就可以很简单的提供读取速度。

//按照使用情况保存数据到缓存async getById(id) {    if (!id) return {};
   id = this.tableKey + "_" + id;    //如果有缓存
   if (this.cacheList.has(id)) {        let tmp = this.cacheList.get(id);        //如果过量了
       if (this.cacheKeyList.length > 20) {            this.cacheKeyList.push(id);            let k = this.cacheKeyList.shift();            this.cacheList.delete(k);
       }        return tmp;
   }    this.cacheKeyList.push(id);    this.cacheList.set(tmp);    return await getItem(id);
}

这个方式还可以继续优化。将变量中保存的数据限制数量,防止数量太多超过了 App 的限制。

还可以将这个保存的时限做一个逻辑判断,常使用的数据放在里面,不常用的就找机会删除。

使用这种方式也可以优化变量中数据的有效性,减少变量占用内存的大小。

不过实现的方式尽量不要使用定时器的形式,可以考虑使用触发式的。在条件满足的时候再触发删除动作。

优化写入

上面提到读取的时候需要放入变量来提高读取速度。我们顺便想到写入的速度是不是也可以提高啊?

我们将要存的数据放在临时的变量里,如果超过我们设置的时间或者数据长度超过我们设置的数量就触发一次保存操作。

这里要注意,保存数据的变量和存入时候使用的变量要交替使用,防止出现丢数据的情况。

比如:存的时候使用变量1,在写到数据库之前,将要存的对象改成变量2,然后读取变量1的数据并存入数据库中。这就是双缓存写入。

当然还是要判断一次 App 退出事件的,如果 App 退出了,请一定要把变量中的内容保存一次,不然你的心血就全丢了。

注意写入要和上面的读取结合起来,不然就会发现写入的数据会有一个很大的延迟。

//添加和更新async add(data = {}) {    if (data.constructor !== Object) return;
   data._id = uuid();    const key = this.tableKey + "_" + data._id    this.writeList.set(key, data);    this.write();    //this.read();
   return data;
}//写入的实现,now立马写入write(now = false) {    if (now || this.writeList.size > 20) {        let tmp = this.writeList;        this.writeList = this.backWriteList;        this.backWriteList = tmp;        this.backWriteList.forEach((v, k) => {
           setItem(k, v);
       })
   }
}

好了,一个简单的数据库就完成了。想要使用的可以先在 npm 上搜索 react-native-jsdb 这个库。我已经将第一部分实现放在了 npm 上,后续的优化也会慢慢地开源出来。

这里推荐一下我的前端学习交流群:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习知识。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为什么程序员总是发现不了自己的Bug? 程序员: 我不认识他啊

    程序员在普通人的印象里是一份严(ku)谨(bi)的职业,也是一个被搞怪吐槽乐此不疲的职业,程序员们面对复杂的代码敲打电脑时连眉头都不会皱一下,但是有一个词却是他...

    一墨编程学习
  • 程序员升职最快的原因竟然代码写的最烂?网友评论:没毛病!

    都说程序员是个技术活,职位定级升职加薪全凭技术能力。但是问问行内人好像并不是这么一回事,这么为什么呢?近日有网友发帖阐述:大家有没有发现,公司里升职升的最快的,...

    一墨编程学习
  • 为什么程序员找不到工作:无关技术,4个不可思议的事情!

    当求职被拒时,我们多半会认为是自己的错:“我被三家公司拒了,我可能是一个差劲的工程师。”招聘比你想象的还要复杂。工程师出身的技术猎头 Iwan 在本文讲了 4 ...

    一墨编程学习
  • 分布式系统中生成全局ID的总结与思考

    世间万物,都有自己唯一的标识,比如人,每个人都有自己的指纹(白夜追凶给我科普的,同卵双胞胎DNA一样,但指纹不一样)。又如中国人,每个中国人有自己的身份证。对于...

    用户1263954
  • 编码风格:Mvc模式下SSM环境,代码分层管理

    MVC模式与代码分层策略,MVC全名是ModelViewController即模型-视图-控制器,作为一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法...

    知了一笑
  • 编码风格:Mvc模式下SSM环境,代码分层管理

    MVC模式与代码分层策略,MVC全名是ModelViewController即模型-视图-控制器,作为一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法...

    全栈程序员站长
  • R语言 | 根据数据框的顺序进行筛选

    这里有两个数据框,两者有相同的列(ID),这里想把第一个数据框,按照第二个数据框的ID列进行提取,顺序和第二个数据框一致。

    邓飞
  • 基于VideoView自定义控制面板的视频播放器

    本文实例为大家分享了VideoView原生自定义视频播放器的具体代码,供大家参考,具体内容如下

    砸漏
  • Sqli_labs65关通关详解(上)

    Less-1 这个题目是基于错误,单引号,字符型注入, http://127.0.0.1/sqli/Less-1/?id=1' //报错 http://...

    安恒网络空间安全讲武堂
  • Yii2 学习笔记之数据库篇

    琯琯

扫码关注云+社区

领取腾讯云代金券