基于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