angular-localForage核心API深度解析setItem/getItem/removeItem实战手册【免费下载链接】angular-localForageAngular service directive for https://github.com/mozilla/localForage (Offline storage, improved.)项目地址: https://gitcode.com/gh_mirrors/an/angular-localForageangular-localForage 是一个为 AngularJS 打造的离线存储增强服务它将 Mozilla 的 localForage 库封装成标准的 Angular 服务和指令让浏览器端的数据持久化变得异常简单。本文从零开始带你深入解析 angular-localForage 中 setItem、getItem、removeItem 三大核心 API 的完整用法与底层实现并附上可直接复用的实战代码与避坑技巧助你快速掌握离线存储的正确打开方式。angular-localForage 是什么为什么离线存储要选它传统的前端数据保存依赖localStorage但它容量小、只能存字符串还容易在隐私模式下报错。angular-localForage 的核心思路是自动选择浏览器当下可用的最佳存储方案优先 IndexedDB其次 WebSQL最后回退到 localStorage你完全不用关心底层差异。它的几个突出优势特性说明 自动降级按 IndexedDB → WebSQL → localStorage 顺序自动选择驱动⚡ 全异步所有 API 都返回 Promise告别同步阻塞 零配置注入模块即可用开箱即吃 类型丰富可存储对象、数组、数字、布尔值无需手动序列化 服务 指令双形态既可在控制器里调用也可在模板中直接绑定底层封装代码集中在 src/angular-localForage.js模块名为LocalForageModule核心服务为$localForage。快速上手3 步完成 angular-localForage 配置第 1 步引入脚本文件确保localforage.js在angular-localForage.js之前加载script srcpath/to/localforage.js/script script srcpath/to/angular-localForage.js/script第 2 步注入模块并配置 providerangular.module(myApp, [LocalForageModule]) .config([$localForageProvider, function($localForageProvider) { $localForageProvider.config({ name: myApp, // 数据库名称与数据前缀默认为 lf storeName: keyvaluepairs, // 表名 description: some description }); }]);第 3 步在控制器中注入服务app.controller(MyCtrl, [$scope, $localForage, function($scope, $localForage) { // 接下来就可以使用三大核心 API 了 }]);完整可运行示例可参考 example/js/controllers.js 和 example/index.html。setItem 方法深度解析如何把数据安全写入本地setItem(key, value)用于存储一条数据返回一个 Promise写入成功后 resolve 出刚刚存入的值。源码位于 src/angular-localForage.js。setItem 基础用法一个 key 存任意类型$localForage.setItem(username, 张三) .then(function(data) { console.log(写入成功, data); // 张三 }); // 存对象、数组、数字都行 $localForage.setItem(userInfo, { name: 张三, age: 18 }); $localForage.setItem(scores, [98, 87, 92]);注意如果 key 是undefined会直接抛出You must define a key to set错误。setItem 批量写入一次操作多组数据当第一个参数传入数组时第二个参数也必须是对应的数组两者按下标一一配对内部会逐个写入并等待全部完成$localForage.setItem([key1, key2, key3], [v1, v2, v3]) .then(function(values) { console.log(全部写入成功, values); });隐藏福利setItem 自动清理 $promise 与 $$hashKey这是很多新手不知道的贴心设计当存入对象时angular-localForage 会自动递归剥离对象内部的$promise和$$hashKey这类 Angular 运行时产生的元数据避免脏数据被持久化到存储中。测试用例见 tests/item.js。getItem 方法深度解析如何优雅地读取数据getItem(key)用于读取之前存储的值同样返回 Promise。源码位于 src/angular-localForage.js。getItem 基础用法读取并处理结果$localForage.getItem(username) .then(function(data) { console.log(读取到的值, data); }) .catch(function(err) { console.error(读取失败, err); });rejectOnNull 参数如何区分空值与不存在这是 getItem 最值得玩味的参数。localForage 规定读取不存在的 key 时返回null。但如果你自己存的就是null两者就无法区分了。解决方案是第二个参数rejectOnNull// 默认行为无论 null 是不存在还是存的空值都正常 resolve $localForage.getItem(notExistKey).then(function(data) { console.log(data); // null但不报错 }); // 传入 true当值为 null 时Promise 被 reject $localForage.getItem(notExistKey, true) .then(function(data) { // 只有真正有值才会走到这里 }) .catch(function(data) { console.log(该 key 不存在或值为 null, data); });getItem 批量读取一次取回多个值与 setItem 对称getItem 也支持传数组 key内部通过iterate遍历查找返回按下标排列的结果数组缺失的项会以null补齐$localForage.getItem([key1, key2, key3]) .then(function(values) { console.log(values); // [v1, null, v3] });removeItem 方法深度解析彻底删除指定数据removeItem(key)用于删除指定 key 的数据删除成功时 Promise resolve不返回具体值。源码位于 src/angular-localForage.js。removeItem 基础用法清理单个数据$localForage.removeItem(username) .then(function() { console.log(删除成功); }) .catch(function(err) { console.error(删除失败, err); });removeItem 批量删除一次清理多条记录$localForage.removeItem([key1, key2, key3]) .then(function() { console.log(三条数据已全部删除); });⚠️ 小提示删除操作同样要求 key 不能为undefined否则抛出You must define a key to remove。进阶实战事件通知、pull 与双向绑定掌握了三大核心 API 之后下面这几个配套能力能显著提升开发效率。开启数据变更通知广播 setItem / removeItem 事件在配置阶段调用setNotify(true, true)之后每次setItem和removeItem都会向$rootScope广播事件方便跨组件联动$localForageProvider.setNotify(true, true); // 在其他地方监听 $rootScope.$on(LocalForageModule.setItem, function(evt, data) { console.log(刚写入的 key, data.key, 新值, data.newvalue); }); $rootScope.$on(LocalForageModule.removeItem, function(evt, data) { console.log(刚删除的 key, data.key); });pull读取即删的组合拳pull(key)相当于getItemremoveItem的封装先取出值返回给你同时立刻从存储中删除非常适合做一次性消费的场景比如取号、领取任务。源码见 src/angular-localForage.js$localForage.pull(tempToken) .then(function(value) { console.log(取出的临时值, value); // 用完即删安全 });bind一行代码实现表单自动持久化除了服务调用angular-localForage 还提供了local-forage指令在模板中直接双向绑定并自动存取配合$localForage.bind()源码 src/angular-localForage.js使用体验极佳input local-forage{key: autoStoredKey, defaultValue: 默认值} ng-modelautoStoredKey placeholder输入内容自动保存用户每次输入都会自动写入本地存储刷新页面后数据自动恢复无需手写任何监听代码。angular-localForage 常见问题与避坑指南读取不存在的 key结果是什么返回null。如果恰好你的业务会存null值记得用getItem(key, true)配合.catch来区分空值与不存在。数组批量操作有什么限制setItem的 key 数组与 value 数组必须长度对应getItem数组读取时不存在的项会以null占位再结合rejectOnNull参数决定是否 reject。隐私浏览模式会崩溃吗不会。angular-localForage 内置了错误处理逻辑src/angular-localForage.js当 IndexedDB/WebSQL 在 Firefox、Safari 隐私模式下抛出InvalidStateError时会自动降级切换到 localStorageWrapper 驱动并重试最大程度保证可用性。如何同时管理多套存储空间使用createInstance({ name: xxx })创建独立实例再用instance(xxx)按名获取各实例的数据互不干扰甚至可以让一个实例用 localStorage、另一个用 IndexedDB。总结回顾一下本文的核心内容angular-localForage 通过$localForage服务把离线存储的复杂度全部隐藏起来而setItem、getItem、removeItem三大核心 API 构成了数据持久化的完整闭环——写入、读取、删除且都支持数组批量操作与 Promise 异步风格。强烈建议你动手把这三兄弟在真实项目里跑一遍先用setItem存下一份用户配置再用getItem在页面刷新后恢复它最后用removeItem实现退出即清除。相信很快你就能体会到 angular-localForage 带来的流畅体验从此告别手写 localStorage 的繁琐日子。【免费下载链接】angular-localForageAngular service directive for https://github.com/mozilla/localForage (Offline storage, improved.)项目地址: https://gitcode.com/gh_mirrors/an/angular-localForage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考