缓存作为一种非常常见的优化手段，不管是前端还是后端都能够经常用到,
后端的缓存方案, 就是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
随时随地看视频
