企业官网建设流程全解析

浏览器隐私模式也不怕：angular-localForage自动降级存储的容错原理

【免费下载链接】angular-localForageAngular service & directive for https://github.com/mozilla/localForage (Offline storage, improved.)项目地址: https://gitcode.com/gh_mirrors/an/angular-localForage

当用户开启浏览器隐私模式（无痕模式）时，很多 Web 应用的前端本地存储会瞬间"失灵"：数据写入报错、页面功能瘫痪。而angular-localForage——一个专为 AngularJS 打造的离线存储增强服务与指令——内置了一套自动降级的容错机制，能在隐私模式下自动从 IndexedDB/WebSQL 切换到 localStorage，让应用继续稳定运行。本文将以通俗易懂的方式，为你拆解 angular-localForage 自动降级存储的容错原理，并附上快速上手指南。

一、隐私模式下，为什么本地存储会突然"罢工"？

浏览器为 Web 应用提供了多种本地存储方案，localForage 会根据浏览器能力，按以下优先级自动选择"最先进"的可用方案：

这套"择优录取"的策略在正常模式下非常高效，但一旦进入隐私模式，问题就出现了：

• 🦊Firefox 隐私模式：IndexedDB 写入会直接抛出InvalidStateError错误；
• 🍎Safari 隐私模式：IndexedDB / WebSQL 被禁用，报错码为5（SecurityError），可用配额直接归零。

如果应用不做任何处理，前端存储就会"全线瘫痪"。这正是 angular-localForage 容错机制存在的意义。

二、核心容错思路：识别错误 → 切换驱动 → 重试操作

angular-localForage 的降级容错并不复杂，核心就三步：识别隐私模式典型错误、把存储驱动切换为 localStorage、自动重试刚才失败的操作。

第一步：精准识别"隐私模式错误"

在 src/angular-localForage.js 的onError方法中，项目用一段巧妙的判断来识别隐私模式：

if (((angular.isObject(err) && err.name === 'InvalidStateError' || err === 'InvalidStateError') && this.driver() === 'asyncStorage') || (angular.isObject(err) && err.code === 5)) { // 命中隐私模式错误，触发降级 }

判断逻辑可以拆解为两条：

• 当前驱动是asyncStorage（IndexedDB/WebSQL 层），且错误是InvalidStateError——对应Firefox 隐私模式；
• 错误对象携带code === 5——对应Safari 隐私模式（SecurityError）。

只有命中这些"可恢复"的错误才会触发降级；其他错误仍然按原样抛出，避免掩盖真正的 bug。

第二步：切换驱动并自动重试

识别出隐私模式错误后，代码调用setDriver('localStorageWrapper')切换到 localStorage，然后原封不动地重放刚才失败的方法调用：

self.setDriver('localStorageWrapper').then(function() { fct.apply(self, args).then(function(item) { deferred.resolve(item); }, function(data) { deferred.reject(data); }); }, function() { deferred.reject(err); });

注意fct.apply(self, args)这一行——它把失败的方法（如setItem）连同原始参数重新执行一遍，开发者无需写任何降级代码，操作就"原地复活"了。整个过程对调用方完全透明，Promise 依然正常 resolve/reject。

setItem 路径上的容错

对于setItem写操作，源码在 src/angular-localForage.js 提供了另一个onError辅助函数，挂在 Promise 链的.catch()上，逻辑一致：先判断错误类型，再切换驱动重试，最后把结果原样返回给业务层。

三、降级之后的细节：key 前缀兼容

切换到 localStorage 后还有一个细节值得注意：localStorage 的 key 是全局平铺的，为避免与同域其他应用冲突，angular-localForage 支持通过oldPrefix配置使用"实例名."作为 key 前缀，相关逻辑集中在 src/angular-localForage.js 的prefix()方法中，便于老版本数据的平滑迁移。

这意味着即使 IndexedDB 和 localStorage 混合使用，你的数据也井井有条、互不干扰。

四、除了隐私模式，这套容错还能应对哪些场景？

自动降级机制不只服务隐私模式，凡是命中上述两类错误的场景都会自动兜底：

• 💾磁盘配额耗尽：IndexedDB 写入超限抛出的异常，同样能触发降级；
• 🔒浏览器安全策略收紧：部分环境限制 IndexedDB 使用，应用也能平滑过渡；
• 🖥️企业浏览器 / 老版本内核：WebSQL 支持不完整时，直接落到 localStorage 保证可用性。

一句话总结：无论底层存储多"娇气"，你的 AngularJS 应用都能找到最朴素的替代方案。

五、快速上手：3 步接入 angular-localForage

如果你也想用上这套自带容错的离线存储，跟着下面的步骤即可快速接入。

第 1 步：获取源码并引入依赖

git clone https://gitcode.com/gh_mirrors/an/angular-localForage

按顺序引入localforage.js与angular-localForage.js（注意先后顺序）：

<script src="path/to/localforage.js"></script> <script src="path/to/angular-localForage.js"></script>

第 2 步：声明模块依赖并配置

在应用入口注入LocalForageModule，并通过 Provider 做基础配置（参考 example/js/app.js）：

angular.module('myApp', ['LocalForageModule']) .config(['$localForageProvider', function($localForageProvider) { $localForageProvider.config({ name: 'myApp' // 数据库名称与 key 前缀 }); }]);

第 3 步：用服务或指令读写数据

方式一：使用 $localForage 服务，全部基于 Promise 异步操作：

$localForage.setItem('myName', 'Olivier Combe').then(function() { return $localForage.getItem('myName'); }).then(function(data) { console.log('读取结果:', data); });

方式二：使用 local-forage 指令，实现表单输入的自动持久化：

<input local-forage="{key: 'autoStoredKey', scopeKey: 'myObj.myVar', defaultValue: '默认值'}" ng-model="myObj.myVar" placeholder="自动存储">

完整可运行的示例在 example/ 目录，核心实现与单元测试分别在 src/angular-localForage.js 和 tests/ 中，你也可以参考 tests/functional.js 了解各类数据类型的存取行为。

六、结语：让存储"自带保险丝"

隐私模式下的存储报错，是每个前端开发者迟早都会踩的坑。angular-localForage 用一套轻巧的"识别错误 → 切换驱动 → 重试操作"机制，为 AngularJS 应用加上了存储保险丝：开发者不需要关心用户开没开无痕模式，也不用写一堆 try/catch 兜底，数据总能被安全地存下来。如果你的项目还在用 AngularJS 做离线数据缓存，不妨试试这个自带自动降级能力的方案，让本地存储真正做到"风雨无阻"。🚀

【免费下载链接】angular-localForageAngular service & directive for https://github.com/mozilla/localForage (Offline storage, improved.)项目地址: https://gitcode.com/gh_mirrors/an/angular-localForage