来源：网络
前言
之前开发了一个离线存储的需求，需要在本地存储较大的数据量，并且还要考虑到多种场景下的存储方式兼容。
产品的原话就是“要又大又全”。
既然存储量大，也要覆盖全多种设备多种浏览器。
方案选择
-
-
localStorage，虽然比cookie多，但是同样有上限（5M）左右，备选
-
-
indexDB api多且繁琐，存储量大、高版本浏览器兼容性较好，备选
既然罗列了一些选择，都没有十全十美的，那么有没有一种能够集合这多种方式的插件呢？渐进增强 or 优雅降级 的存在
冲着这个想法，就去github和谷歌找了一下，还真的有这么一个插件。
那就是
localforage
localforage
localForage 是一个 JavaScript 库，只需要通过简单类似
localStorage
API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。
关于兼容性
localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。下面是 indexDB、web sql、localStorage 的一个浏览器支持情况，可以发现，兼容性方面loaclForage基本上满足99%需求
关于存储量
首先indexDB的存储，理论上是硬件有多大内存就可以存多少，但是有些浏览器厂商会限制，具体限制各家不同，但是基本最小是250M起步
使用
解决了兼容性和存储量的点，我们就来看看localforage的基础用法
安装
# 通过 npm 安装：
npm install localforage
// 直接引用
获取存储
getItem(key, successCallback)
从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，
getItem()
将返回
null
。
localforage.getItem('somekey').then(function(value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
// 回调版本：
localforage.getItem('somekey', function(err, value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
});
设置存储
setItem(key, value, successCallback)
将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象：
localforage
.setItem("somekey", "some value")
.then(function (value) {
// 当值被存储后，可执行其他操作
console.log(value);
})
.catch(function (err) {
// 当出错时，此处代码运行
console.log(err);
});
// 不同于 localStorage，你可以存储非字符串类型
localforage
.setItem("my array", [1, 2, "three"])
.then(function (value) {
// 如下输出 `1`
console.log(value[0]);
})
.catch(function (err) {
// 当出错时，此处代码运行
console.log(err);
});
// 你甚至可以存储 AJAX 响应返回的二进制数据
req = new XMLHttpRequest();
req.open("GET", "/photo.jpg", true);
req.responseType = "arraybuffer";
req.addEventListener("readystatechange", function () {
if (req.readyState === 4) {
// readyState 完成
localforage
.setItem("photo", req.response)
.then(function (image) {
// 如下为一个合法的 ![]()
标签的 blob URI
var blob = new Blob([image]);
var imageURI = window.URL.createObjectURL(blob);
})
.catch(function (err) {
// 当出错时，此处代码运行
console.log(err);
});
}
});
删除存储
removeItem(key, successCallback)
从离线仓库中删除 key 对应的值。
localforage.removeItem('somekey').then(function() {
// 当值被移除后，此处代码运行
console.log('Key is cleared!');
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
清空存储
clear(successCallback)
从数据库中删除所有的 key，重置数据库。
localforage.clear()
将会删除
离线仓库中的所有值
。谨慎使用此方法。
localforage.clear().then(function() {
// 当数据库被全部删除后，此处代码运行
console.log('Database is now empty.');
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
更多
除了基本的增删查改，还有一些配置，如指定具体使用哪一种存储方式、设置数据库的名称、长度等信息 可参考
官方文档
localforage是否万事大吉？
用上了localforage一开始我也以为可以完全满足万恶的产品了，然而。。。翻车了
问题
在这个功能上线半年，一直相安无事，有一天晚上突然产品说接到反馈说有用户的手机进入页面没有缓存上次的操作数据。
我第一反应，“不可能，绝对不可能”
我询问了一下，用户的手机是什么型号，当我看到手机图片的时候。。。我是没想到。。。
如下图：
这玩意，一些小年轻都可能没见过。。。。iphone4哇，现在是出到了iphone14了吧？？？
不得了不得了，iphone4居然也是我们的用户群体？？？
分析
既然遇上了，还是冷静分析一下吧。起初第一反应是这古董机的兼容性有问题，是不是只支持localstorage导致只能存储5M的内容，超过了上限，导致无法缓存了？
然而，当产品不知道从哪找到了一部iphone4给我（我也真的服了这个老6），我拿到真机试了下，得到让我无法呼吸的结果，iphone4这古董机居然支持indexDB，那么就不是超过了5M的上限导致缓存失败了
进一步假设
