放弃localStorage，拥抱IndexDB

概述

随着前端的技术发展越来越强，网页功能不断增加，越来越复杂的交互和业务需要前端来实现，那么作为前端开发就需要面对越来越庞大的数据体，那么其中一个常用的优化方式就是本地存储一些不变的数据，从而提升页面渲染的速度，减少从服务器获取数据。

我们以前和现在都会经常用的本地缓存方式一般都是localStorage、sessionStorage和cookie。但是都会有一个很严重的问题，就是它们都不能存放大量数据，在现在的业务情况下，很容易出现存放数据过大，导致超出浏览器对于localStorage、sessionStorage和cookie的存储大小，cookie不能超过4KB，localStorage和sessionStorage一般不超过4MB（不同浏览器的限制不一样），所以这些技术都不太适合存放大量的数据。所以在这个前提下，我们就可以使用HTML5提供的新API，IndexDB!

IndexedDB 具有以下特点。

（1）键值对储存。IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

兼容

我们通过 caniuse

来看看兼容情况。

可以看到大部分主流程的浏览器其实都已经兼容了indexDB了，那么我们只需要做一些简单的降级就可以了。

如何使用

IndexDB其实网上有很多教程，包括阮一峰老师的IndexDB入门或者直接看MDN。在这里不就重复去说明了，如果你有用过mongoDB的话，那么也很好理解IndexDB的原理和使用。

什么场景下使用

其实无论是你要存储大量的数据到本地，还是小量数据到本地，其实都可以使用IndexDB。那么我是什么情况下用呢？

最近在公司有一个场景，就是对我们的商品列表的数据进行缓存，因为在浏览器当中，如果要实现后退上一个页面，不刷新页面，一般只有用单页应用才能实现，但是无奈我们因为种种原因，没有使用单页，所以必须要将数据缓存到本地，下次打开列表后，发现如果url中的id和缓存的数据id一致，那么就直接使用缓存数据，不再进行请求。

一开始打算就用localStorage来解决的，但是发现在一些特定情况下，数据有可能达到接近5MB的数据，在PC的Chorme中是可以存到localStorage的，但是在IOS中，却报出空间不足，无法放入localStorage中，所以这个时候就是使用indexDB了！因为indexDB的空间大得我可以完全不去考虑数据大小，而且还能直接以对象的形式存入，无需转为JSON字符串。大大减少了转换的运算。但是因为使用indexDB和使用localStorage是完全不一样的，基本上都是异步操作而且还要考虑一些低版本的手机可能不支持的情况，所以要封装中间件，同样的调用，根据设备对indexDB的兼容情况，自动决定使用indexDB还是localStorage。最终完成需求，并且优化前后达到超过70%的优化率，页面的渲染基本秒开。

总结

indexDB是完全可以替代localStorage的存在..