1. 基本概念
localForage 是一个前端开发的JavaScript 库，他提供了一种简单且跨越浏览器的方式来进行本地存储。是一个基于IndexDB、WebSQL、LocalStorage等浏览器本地存储API的封装库。他提供了一致的API和简单的异步操作，使开发者能够轻松地在浏览器中存储和检索数据。该库有一个优雅降级策略，即若浏览器不支持IndexedDB或WebSQL，则会自动使用localStorage作为备选存储方案，这确保了在不同浏览器中的兼容性。
2. 主要特点
-
跨浏览器支持：localForage在所有主流浏览器中都可用，包括Chrome、Firefox、IE和Safari（包括Safari
Mobile）。它通过封装不同浏览器的本地存储API来提供一致性和跨浏览器支持，从而降低了兼容性风险。 -
异步操作：localForage提供了异步API，可以处理大量数据的存储和检索操作而不会阻塞主线程。这与localStorage的同步操作相比，具有更高的性能和响应速度。
-
数据类型支持：localForage支持存储多种类型的数据，包括但不限于字符串、对象、数组以及二进制数据（如Blob、ArrayBuffer等）。这满足了前端开发中多样化的数据存储需求，而无需进行序列化和反序列化操作。
4.存储容量：相较于localStorage通常具有的5MB至10MB的存储容量限制，localForage可以根据浏览器的支持情况选择不同的存储引擎（如IndexedDB），从而处理更大量级的数据。
5.优雅降级策略：若浏览器不支持IndexedDB或WebSQL，localForage会自动使用localStorage作为备选存储方案，确保数据的存储和检索功能不受影响。
4. 使用方法
- 安装与引入：
开发者可以通过npm或yarn等包管理工具安装localForage，并在项目中引入它。例如，使用npm安装：npm install localforage。
- 存储数据：使用setItem方法可以将数据存储到本地。例如：
localforage.setItem('key', 'value').then(() => {
console.log('Data stored successfully');
}).catch((error) => {
console.error('Error storing data:', error);
});
- 检索数据：使用getItem方法可以从本地检索数据。例如：
localforage.getItem('key').then((value) => {
console.log('Retrieved data:', value);
}).catch((error) => {
console.error('Error retrieving data:', error);
});
- 删除数据：使用removeItem方法可以从本地删除数据。例如：
localforage.removeItem('key').then(() => {
console.log('Data removed successfully');
}).catch((error) => {
console.error('Error removing data:', error);
});
- 清空数据：使用clear方法可以清空所有存储的数据。例如：
localforage.clear().then(() => {
console.log('All data cleared');
}).catch((error) => {
console.error('Error clearing data:', error);
});
5. 使用场景
- 离线应用程序：localForage可用于构建离线应用程序，使用户能够在断网或离线状态下访问存储的数据。
- 数据持久化：在Web应用程序中，可以使用localForage来持久化存储用户数据、应用程序状态等信息。
- 性能优化：由于localForage提供了异步API，可以在处理大量数据时不会阻塞主线程，从而提高应用程序的性能和响应速度。
5. localForage 使用异步原因探究
5.1 实现方式
localForage实现异步操作主要依赖于它底层所使用的浏览器本地存储API，如IndexedDB、WebSQL和localStorage（虽然localStorage本身是同步的，但localForage在使用它时也会模拟异步行为）。以下是localForage实现异步操作的具体方式：
- 底层API的异步特性
- IndexedDB：IndexedDB是一个低级的API，用于客户端存储大量结构化数据，包括文件/二进制大型对象（blobs）。它提供了一组异步的API来操作数据，如打开数据库、创建对象存储、添加或检索数据等。这些操作通常通过事件监听器或Promise来处理异步结果。
- WebSQL：WebSQL是一个已废弃的浏览器API，用于在客户端存储结构化数据。它提供了SQL语言的子集来查询和操作数据。WebSQL的API也是异步的，通过回调函数来处理查询结果。
2.localForage 的异步封装
localForage在封装这些底层API时，提供了一致的异步API接口，使开发者无需关心底层实现细节。它主要通过以下几种方式实现异步操作： - Promise接口： localForage的API方法（如setItem、getItem、removeItem、clear等）都返回Promise对象。
开发者可以使用.then()和.catch()方法来处理异步操作的成功和失败情况。 - **回调函数接口：**除了Promise接口外，localForage还提供了传统的回调函数接口。开发者可以在API方法的最后一个参数中传入一个回调函数，该函数会在异步操作完成时被调用。
- 优雅降级策略
当浏览器不支持IndexedDB或WebSQL时，localForage会自动降级使用localStorage作为存储后端。虽然localStorage本身是同步的，但localForage在使用它时会模拟异步行为，即通过在内部使用setTimeout或Promise.resolve()等方法来将同步操作转换为异步操作。这样做可以保持API的一致性，使开发者无需关心底层存储的具体实现。
5.2 localForage 使用异步操作的优势
- 避免阻塞主线程：异步操作允许localForage在处理大量数据或进行复杂操作时不会阻塞浏览器的主线程。这确保了用户界面保持流畅和响应性，即使在后台进行数据读写时也是如此。
- 提高性能和用户体验：通过异步操作，localForage可以在不干扰用户交互的情况下完成数据存储和检索任务。这有助于提高应用程序的整体性能和用户体验，使用户能够更顺畅地使用应用程序。
- 与现代JavaScript变成模式集成：localForage的异步API与现代JavaScript的异步编程模式（如Promises和async/await）高度集成。这使得开发者能够更轻松地编写和管理异步代码，减少错误和复杂性。
- 跨浏览器兼容性：localForage通过封装不同浏览器的本地存储API（如IndexedDB、WebSQL和localStorage），并提供一致的异步API接口，降低了跨浏览器兼容性的风险。开发者无需担心底层存储实现的差异，只需关注localForage提供的API即可。
- 错误处理更加灵活：异步操作允许开发者使用.catch()方法或Promise的拒绝处理机制来捕获和处理错误。这使得错误处理更加灵活和可控，有助于开发者更好地调试和维护代码。
- 支持多种数据类型：尽管这一点不完全是异步操作的优势，但值得提及的是，localForage支持存储多种类型的数据（如字符串、对象、数组和二进制数据等），并且这些数据的存储和检索操作都是异步的。这进一步增强了localForage的灵活性和实用性。
6. localForage 存储数据类型
a. 支持的数据类型
字符串、对象、数据
b. 不支持的数据类型
函数、循环引用、特定类型的内置对象如 data、 undefined、null。
- undefined、null：undefined和null是两个特殊的值，它们表示“无”或“空”。虽然localForage可以存储这两个值（通常作为字符串或空值处理），但在实际开发中，我们更倾向于存储有意义的数据。
- 特定类型的内置对象：虽然localForage可以存储这些类型的对象，但在存储之前通常需要将它们转换为字符串或其他可序列化的格式。例如，Date对象可以转换为ISO格式的字符串进行存储。
7. localForage 选择存储引擎探索
7.1 选择存储引擎
- 默认情况下，localForage 按照以下顺序选择数据仓库的后端驱动：
（1） IndexedDB
（2） WebSQL
（3） localStorage - 如果你想强制使用特定的驱动，可以使用 setDriver()，参数为以下的某一个或多个：
（1） localforage.INDEXEDDB
（2） localforage.WEBSQL
（3） localforage.LOCALSTORAGE
强制设置localstorage 为后端驱动：
// 方法1
localforage.setDriver(localforage.LOCALSTORAGE);
// 方法2
localforage.setDriver([localforage.LOCALSTORAGE, localforage.INDEXEDDB]);
7.2 localForage 默认存储顺序选择原因
IndexedDB 相对于 websql 拥有广泛的支持性，内存通常可以达到250MB，