本文背景

在我们的Web专案开发中常常会遇到一些资料的储存问题，因为有一些资料相对来说对于安全性要求比较低，在现代Web专案开发中大部分已经走向前后端分离的模式，一般通用的都是向前端提供rest api。我个人认为，虽然前后端分离的模式很好的解决了后端统一的问题，但是相对来说，如果大量的重复资料或者一些基础资料每次都通过请求服务器来说无疑是对服务器资源的一种浪费，既然浏览器提供了数据库，那么我们为什么不好好利用起来呢？

常用前端数据库

目前使用比较多的就是localStorage和IndexDB，这两种方案我相信大多数人用的比较多的还是前者，笔者目前在专案中使用的也是它，那么两者简单的来说会有哪些不一样的地方呢，或者说各有什么优缺点：

1、localStorage：

对于localStorage，要说有点无疑就是使用起来简单，储存量对大多数业务来说已经足够，对开发者来说几乎没有门槛，只要不是滥用就不会有什么大的问题，不过它是同步的

2、IndexDB

相对于localStorage，其最大的特点就是它是异步的，操作没localStorage那么方便，不过其最大的优势就是资料储存量比localStorage大，对于资料比较多的情况下还是很适用的

如何选择？

说了这么多，无疑就是怎么选择的问题，其实如果你的专案所需要的储存量较小，那么你可以选择localStorage，如果资料量大了就需要考虑一下是不是需要使用IndexDB了，其实这时候应该有很多人和我一样，有没有办法将两者结合起来使用，既能达到易用的目的，当资料量大的时候又够用呢？答案无疑是肯定的

第三方库的选择

对于这种共性的需求，我们为了减轻自己的工作负担，可能第一想法就是寻找一个有效的第三方库来达到我们的目的，也就是有些人常说的，避免重复造轮子，那么我就从我知道的第三方库说起：

1、localForage这个库是我强烈推荐的，在Github上star数超过12k+，是目前我遇到的相容性最好的库，而且使用非常简单，localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步储存来改进你的 Web 应用程序的离线体验。它能储存多种型别的资料，而不仅仅是字串。localForage 有一个优雅降级策略，若浏览器不支援 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。同时他还提供了es6的promise的支援和回拨两种方式，随便你如何选择！

// 通过 localStorage 设定值

localStorage.setItem(\'key\', JSON.stringify(\'value\'));

doSomethingElse();

// 通过 localForage 完成同样功能

localforage.setItem(\'key\', \'value\').then(doSomethingElse);

// localForage 同样支援回拨函式

localforage.setItem(\'key\', \'value\', doSomethingElse);

Github：

https://github.com/localForage/localForage

中文文件：

https://localforage.docschina.org/#

它提供了以下一些API，可供你更好的使用它，其中包括储存驱动设定（即localStorage、IndexDb和WebSQL）等等其他一些设定和用法，文件中都非常的详细，简单明了

2、Lowdb它是一个小型的JSON数据库，支援NodeJS、Electron和浏览器端，主要是它有着和Lodash一样的用法

const low = require(\'lowdb\')

const FileSync = require(\'lowdb/adapters/FileSync\')

const adapter = new FileSync(\'db.json\')

const db = low(adapter)

// Set some defaults (required if your JSON file is empty)

db.defaults({ posts: [], user: {}, count: 0 })

.write()

// Add a post

db.get(\'posts\')

.push({ id: 1, title: \'lowdb is awesome\'})

.write()

// Set a user using Lodash shorthand syntax

db.set(\'user.name\', \'typicode\')

.write()

// Increment count

db.update(\'count\', n => n + 1)

.write()

Github：

https://github.com/typicode/lowdb

3、minimongo

这个库看名字就大致的意思了，没错，它是Web客户端MongoDB实现，支援基本查询，支援IndexedDb（IndexedDb），WebSQL支援（WebSQLDb），支援本地储存（LocalStorageDb）或仅支援内存（MemoryDb）。utils.autoselectLocalDb(options, success, error)可以自动选择可用数据库。如果可行，还支援sqlite外挂，在utils.autoselectLocalDb中option配置中加上{storage：\'sqlite\'}启用sqlite外挂，除了localForage，你还可以选择它，特别是对mongodb比较熟悉的朋友！

Github：

https://github.com/mWater/minimongo