前端本地存储方案-localForage

1 前言

前端有多种本地存储方案可供选择，以下是其中一些常见的方案：

1. Cookie：Cookie是一种小型的文本文件，可以在浏览器中存储少量数据。Cookie通常用于存储会话信息或用户偏好设置等数据（只能存储少量数据）。
2. Web Storage：Web Storage是HTML5引入的API，包括localStorage和sessionStorage。这两种存储方式都可以在浏览器中存储大量数据，并且数据可以跨页面和会话保持不变（虽然比cookie多，但是同样有上限（5M）左右）。
3. IndexedDB：IndexedDB是一种高级的客户端存储API，可以在浏览器中存储大量结构化数据。IndexedDB支持事务和索引等高级功能，并且可以在离线状态下使用（api多且繁琐，存储量大、高版本浏览器兼容性较好）。
4. Web SQL Database：Web SQL Database是一种基于SQL的客户端存储API，已经被废弃。虽然Web SQL Database已经不再被推荐使用，但在某些情况下仍然可以考虑使用（使用简单，存储量大，兼容性差）。
5. File API：File API是HTML5引入的API，可以让浏览器访问用户的本地文件系统。File API可以用于读取和写入本地文件，也可以用于将数据保存到本地文件中（访问用户本地文件系统存在安全性问题、兼容性差、读取和写入大型文件可能会导致浏览器崩溃或变得缓慢）。

这些本地存储方案各有优缺点，没有一种方案可以完全取代其他方案，有没有一种能够集合这多种方式， 遵循“渐进增强”或“优雅降级”的原则的方案呢（在现代浏览器中使用最新的本地存储技术，并在旧浏览器中回退到较旧的技术，确保应用程序在不同浏览器和平台上的兼容性）。是有的

pouchdb 和 localForage 都是前端本地存储的库，它们都支持多种存储后端，并提供了一致的API来存储和检索数据，这些库都遵循“渐进增强”或“优雅降级”的原则。

localForage

优点：

• • 使用异步API封装了Web Storage、IndexedDB和WebSQL的库，提供了简单易用的方法来存储和检索数据。
  • 可以在不同浏览器和平台上提供一致的API。
  • API 相对简单，易于上手。

缺点：

• • 不支持复制和同步功能。
  • 不支持内存存储后端。

使用场景：

• • 对性能要求较高的应用程序。
  • 不需要在多个客户端之间同步数据的应用程序。
  • 对API易用性有较高要求的应用程序

pouchdb

优点：

• • 支持多种存储后端，包括IndexedDB、WebSQL、LevelDB和内存等。
  • 提供了复制和同步功能，使得多个客户端之间可以共享数据。
  • 可以在浏览器和Node.js环境中使用。

缺点：

• • API 相对较复杂，需要一定的学习成本。
  • 在处理大量数据时可能会导致性能问题。

使用场景：

• • 需要在多个客户端之间同步数据的应用程序。
  • 需要使用多种存储后端的应用程序。
  • 对性能要求不是特别高的应用程序。

基于localForage功能强大、易于使用、跨浏览器和平台支持的特点，本文基于localForage进行介绍

2 localForage

localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。

官方提供了中文文档

2.1 兼容性

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。下面是 indexDB、web sql、localStorage 的一个浏览器支持情况，可以发现，兼容性方面loaclForage基本上满足99%需求