本文背景

在我们的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

其它选择

目前有不少类似于以上的第三方库，像zangodb、Dexie.js等，主要是以上三个笔者认为用起来最简单，前端对数据的存错没必要搞得过于复杂，大家可以根据自己的实际情况进行选择！强烈推荐第一个！

总结

对于浏览器客户端的数据存储就介绍到这，其实就是简单向大家介绍下，前端数据库的可操作性，如果用得好将极大地提升性能，改善用户的离线体验，减轻服务器不必要的负载，给自己的项目升值加分，希望对你有所帮助！