为了账号安全,请及时绑定邮箱和手机立即绑定

基于indexDB的前端优化缓存方案

缓存作为一种非常常见的优化手段,不管是前端还是后端都能够经常用到,
后端的缓存方案, 就是redis、memcached这类的
前端的话 可能更多的是http cache 缓存一些静态资源
缓存运用的好是可以大大提升运行速度,提升用户体验的.

H5出来后浏览器多了几种存储方式, 如 localStorage、sessionstorage application cache Web SQL IndexedDB.
目前我们项目最主要用到就是localStorage、indexDB.
localStroage主要用来配合vuex插件来做vuex的持久化,之前写过一篇关于vuex持久化的插件的文章 《关于vuex的持久化》, 有兴趣的可以看下

indexDB用来做一些数据的缓存,为什么要选用indexDB来做缓存而不是选用其他H5的存储方式呢?

  • 持久化限制
    sessionStorage关闭浏览器后就会自动清除掉
    清除浏览器缓存, localStorage会被删除

  • 存储限制
    localStorage 单个domain5M 各个浏览器会有所不同

indexDB支持多种数据格式,持久化存储、支持事务、游标、索引等数据库操作,同时indexDB的存储空间大, 一般浏览器会分配50M-250M不等

现在主要做的项目是关于车辆数据及追踪的SaaS平台,对于indexDB的缓存主要可以用于一些gps数据的缓存、地理位置逆转码的缓存.
拿个最简单的场景来讲:


WX20180709-113532.png

我们从服务端拿过来只有单车的经纬度(latlng), 为了获取到当前的位置,我们一般都会去调用高德的地理位置逆转码通过latlng获取位置,返回如下


WX20180709-114055.png

那我们如果每一次要去获取车辆的位置是否都需要去做一次http请求,要知道减少http请求对于前端优化来说是一个大项,那我们是否能够把这个缓存下来,减少了http请求 读取速度上也会比http请求来的更快


WX20180709-114530.png


这是目前我们项目中对于地理位置的逆转码存储,将latlng作为索引,依次对应address, 在做地理位置逆转码的过程中,先去indexDB里面查询 如果有就直接返回没有的话再调用高德的API. 这样的话 减少了http请求,同时速度也有所提升.

下面说下具体实现:

const $DB = {
    init() {        let _this = this;        let req = indexedDB.open("hb_geocode");
        req.onupgradeneeded = e => {            let db = req.result;            /* 
              createObjectStore 相当于创建一个表
              "geo" 相当于表名
              keyPath 索引 primary key 
            */
            let obStore = db.createObjectStore("geo", {                keyPath: "latlng"
            });  

            // 下面这一段相当于创建表的一些数据结构
            obStore.createIndex("address", "address", { unique: false });
            obStore.createIndex("province", "province", { unique: false });
            obStore.createIndex("district", "district", { unique: false });
            obStore.createIndex("street", "street", { unique: false });
            req.result.close();
        };
    },    /*
       由于indexDB的操作为异步操作,因此用Promise对象进行包装    一下
    */
    Add(payload) {        return new Promise((resolve, reject) => {            let db = indexedDB.open("hb_geocode");          /* 
              
          */
            db.onsuccess = () => {
                db.result
                    .transaction("geo", "readwrite")
                    .objectStore("geo")
                    .add(payload);
                db.result.close();
                resolve();
            };
            db. = e => {
                reject(e);
            };
        });
    },
    Get(key) {        return new Promise((resolve, reject) => {            let db = indexedDB.open("hb_geocode");
            db.onsuccess = () => {                let req = db.result
                    .transaction("geo", "readonly")
                    .objectStore("geo")
                    .get(key);
                db.result.close();

                req.onsuccess = e => {
                    resolve(e.target.result);
                };
                req. = err => {
                    reject(err);
                };
            };
            db. = e => {
                reject(e);
            };
        });
    }
};

以上代码就是我大概封装的一个indexDB的插件
第三方库的话推荐: localForage, 具体我也没用过 好像是有firefox开发和维护的  github star数和issue活跃度都挺不错的,可以考虑试试



作者:打杂coder
链接:https://www.jianshu.com/p/105fcdcc3fbb


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消