企业官网建设流程全解析

5分钟快速上手angular-localForage：AngularJS本地存储入门完全教程

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

还在抱怨 localStorage 容量太小、只能存字符串、还容易被清除？angular-localForage正是为 AngularJS 量身打造的本地存储升级方案：它自动在 IndexedDB、WebSQL 和 localStorage 之间选择最佳存储引擎，全程异步 Promise 驱动，兼容 IE8 以上所有主流浏览器。本文用 5 分钟带你完成AngularJS 本地存储入门，从安装配置到实战 Demo 一次讲透，新手也能轻松上手！🚀

什么是 angular-localForage？AngularJS本地存储为何选它

angular-localForage 是 MozillalocalForage库的 AngularJS 封装，以服务（$localForage）和指令（local-forage）两种形式对外提供能力。它的核心价值在于：开发者无需关心浏览器底层差异，一套 API 通吃所有环境。

angular-localForage 的四大核心优势 ✨

• 智能选型：自动选择浏览器能提供的最佳存储方案（IndexedDB / WebSQL / localStorage 兜底），无需任何手动判断。
• 异步不卡顿：所有读写操作都返回 Promise，数据量大也不阻塞 UI 线程。
• 对象直存：存储 JavaScript 对象、数组原生支持，还会自动剥离$promise、$$hashKey等 Angular 元数据，保证存取纯净。
• 服务 + 指令双形态：既可以在 Controller 中编程调用，也可以在 HTML 中用一条指令实现自动持久化。

快速安装：angular-localForage安装配置一步到位

方式一：包管理器安装（推荐）

npm install angular-localforage localforage # 或使用 bower bower install angular-localforage

方式二：克隆源码

也可以直接获取项目源码自行研究：

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

引入脚本并注册模块

注意引入顺序：localforage.js 必须放在 angular-localForage.js 之前。

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

然后在应用中声明依赖LocalForageModule：

angular.module('yourModule', ['LocalForageModule']);

至此，angular-localForage 安装配置已经完成，接下来直接开写业务代码！

5分钟上手示例：从零实现AngularJS本地存储

打开 example/index.html 和 example/js/app.js，可以看到官方示例的结构。核心控制器逻辑写在 example/js/controllers.js 中，我们拆解一下最常用的存取操作：

app.controller('MyCtrl', ['$scope', '$localForage', function($scope, $localForage) { // 存储数据 $localForage.setItem('myTextStored', 'hello angular-localForage').then(function(data) { console.log('已保存:', data); }); // 读取数据 $localForage.getItem('myTextStored').then(function(data) { $scope.myTextStored = data; }); }]);

没错，整个读写就两行核心代码。因为返回的是 Promise，你可以放心地链式调用或放进$q.all里并行处理。📦

angular-localForage API 速查：最常用的本地存储方法

源码 src/angular-localForage.js 中实现了完整的方法集，日常开发记住下面这张表就够用了：

批量操作与遍历查找

// 批量存取 $localForage.setItem(['a', 'b'], [1, 2]); $localForage.getItem(['a', 'b']).then(function(vals) { console.log(vals); // [1, 2] }); // 遍历查找大于 10 的数字 $localForage.iterate(function(value, key, i) { if (value > 10) return key; // 返回非 undefined 即提前退出 });

一行指令搞定自动存储：local-forage 指令详解

如果你只想让某个输入框自动记住用户填写的内容，连 Controller 都不用写。在模板上添加local-forage指令，数据会自动保存并回填：

<input local-forage="autoStoredKey" ng-model="autoStoredKey" placeholder="自动保存我">

指令实现源码见 src/angular-localForage.js 中的localForage指令定义。它内部自动调用了$localForage.bind，当你需要更精细的控制时，也可以传对象参数：

<input local-forage="{key: 'autoStoredKey', name: 'myApp', scopeKey: 'myObj.myVar', defaultValue: '默认值'}" ng-model="myObj.myVar">

其中key是唯一必填项，scopeKey可把值绑定到 scope 对象的指定字段，defaultValue提供首次访问时的默认值。💡

高级玩法：多实例与双向绑定

多实例并存

不同业务可以各用各的存储空间，互不干扰。通过createInstance创建独立实例：

var lf2 = $localForage.createInstance({ name: '2nd', driver: 'localStorageWrapper' // 强制使用 localStorage }); lf2.setItem('my2ndInstance', '独立数据'); // 之后通过名字随时取回 $localForage.instance('2nd').getItem('my2ndInstance');

这意味着你可以同时让一个实例跑 localStorage、另一个跑 IndexedDB，按需隔离！

bind 双向绑定

bind方法可以把存储值直接绑定到 scope 变量，并自动监听变化写回存储：

$localForage.bind($scope, { key: 'myStorageKey', defaultValue: { test: 'my test' }, scopeKey: 'myObj.myVar' });

取消绑定时调用unbind($scope, 'myStorageKey')，会同时清理 scope 变量和存储数据，非常干净。

进阶配置与事件通知

在 config 阶段可以统一配置默认参数（默认名称前缀为lf）：

angular.module('yourModule', ['LocalForageModule']) .config(['$localForageProvider', function($localForageProvider) { $localForageProvider.config({ name: 'myApp', // 数据库名与数据前缀 driver: 'localStorageWrapper', // 强制指定驱动 storeName: 'keyvaluepairs' // 表名 }); $localForageProvider.setNotify(true, true); // 开启 set/remove 广播 }]);

开启通知后，$rootScope会广播LocalForageModule.setItem与LocalForageModule.removeItem事件，方便你做数据同步或埋点统计。

常见问题与避坑指南 🛠️

• Q：localStorage 只能存字符串？A：angular-localForage 内部会自动序列化，对象数组直接存直接取。
• Q：读取不存在的 key 返回什么？A：默认 resolve 为null；如果希望报错，getItem(key, true)会让 Promise reject，方便区分"没有数据"和"数据为 null"。
• Q：IE8 能用吗？A：可以。项目全面兼容 IE8+，IndexedDB 不可用时自动降级 WebSQL，再不行就用 localStorage 兜底。
• Q：私有模式下报错怎么办？A：源码内置了错误处理，遇到 Firefox/Safari 隐私模式的InvalidStateError会自动切换到 localStorage 驱动重试。

总结

通过本文的AngularJS 本地存储入门，你应该已经掌握了 angular-localForage 的安装、核心 API、指令用法以及多实例等进阶技巧。它把"离线存储、体验增强"变成了一件几行代码的小事。想要更深入地阅读实现细节，可以直接翻看项目源码 src/angular-localForage.js，官方说明见 README.md，测试用例参考 tests/ 目录。现在就去给你的 AngularJS 应用加上离线存储能力吧！🎉

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