AngularJs $cacheFactory 缓存服务
2015-11-15 21:17
746 查看
可能之前的api写的有些枯燥吧,因为不烧脑,不需要很多逻辑思维来做处理,那么之后的文章会有趣很多,慢慢的开始烧脑了,准备好大量脑细胞的死亡吧~ 先来篇简单的缓存服务。
本文将api文档里的$cacheFactory和 $cacheFactory.Cache 放到一起学习,其实就差不多的东西。
$cacheFoctory
用于生成一个用来存储缓存对象的服务,并且提供对对象的访问。
$cacheFactory.Cache
一个用于存储和检索数据的缓存对象。主要使用$http和脚本指令来缓存模板和其他数据。
该服务有以下方法:
put(key,value);
在缓存对象中插入一个键值对(key,value)。
get(key);
在缓存对象中通过指定key获取对应的值。
romove(key);
在缓存对象中通过指定key删除对应的值。
removeAll();
删除缓存对象中所有的键值对。
destroy();
销毁这个缓存对象。
info();
获取缓存对象信息(id,size)。
key:string类型,缓存对象中的值名称。
value:所有类型,缓存对象中的值。
使用代码:
值的注意的是,这是应用程序的缓存服务,而不是浏览器本地的缓存。所以当你刷新浏览器,初始化整个应用程序的时候,之前的缓存数据都会丢失。那么问题就来了,怎么才能刷新/初始化应用程序而不丢失之前保存的数据呢,这个可以使用localStorage或者cookies,关于ng的这两个存储操作,之后的文章会写到,现在根据api一个个慢慢来写,有需要和有兴趣的话,也可以自己网上找资料学习或和野兽进行交流讨论,大家共同进步...
本文将api文档里的$cacheFactory和 $cacheFactory.Cache 放到一起学习,其实就差不多的东西。
$cacheFoctory
用于生成一个用来存储缓存对象的服务,并且提供对对象的访问。
$cacheFactory.Cache
一个用于存储和检索数据的缓存对象。主要使用$http和脚本指令来缓存模板和其他数据。
该服务有以下方法:
put(key,value);
在缓存对象中插入一个键值对(key,value)。
get(key);
在缓存对象中通过指定key获取对应的值。
romove(key);
在缓存对象中通过指定key删除对应的值。
removeAll();
删除缓存对象中所有的键值对。
destroy();
销毁这个缓存对象。
info();
获取缓存对象信息(id,size)。
key:string类型,缓存对象中的值名称。
value:所有类型,缓存对象中的值。
使用代码:
(function () { angular.module("Demo", []) .controller("testCtrl", ["$cacheFactory",testCtrl]); function testCtrl($cacheFactory) { var myCache = $cacheFactory("my-cache"); myCache.put("cache", "This is cache-content"); myCache.put("another-cache", "This is another cache-content"); var getCache = myCache.get("cache"); //This is cache-content var getInfo = myCache.info();//{id: "my-cache", size: 2} myCache.remove("another-cache"); getInfo = myCache.info();//{id: "my-cache", size: 1} myCache.removeAll(); getInfo = myCache.info();//{id: "my-cache", size: 0} myCache.destroy(); getInfo = myCache.info();//{size: 0} }; }());
值的注意的是,这是应用程序的缓存服务,而不是浏览器本地的缓存。所以当你刷新浏览器,初始化整个应用程序的时候,之前的缓存数据都会丢失。那么问题就来了,怎么才能刷新/初始化应用程序而不丢失之前保存的数据呢,这个可以使用localStorage或者cookies,关于ng的这两个存储操作,之后的文章会写到,现在根据api一个个慢慢来写,有需要和有兴趣的话,也可以自己网上找资料学习或和野兽进行交流讨论,大家共同进步...
相关文章推荐
- angularjs 下实现即可通过select选择 也可以通过input输入
- juqery 与angularjs 的区别
- AngularJS 自定义表单验证$parsers
- Angular黑科技之transclude
- AngularJs 基础与进阶
- [转载]AngularJs的一些坑
- angular中的orderBy过滤器使用
- 如何在angular指令渲染模板完毕后再执行link方法,render完毕再在link中操作dom节点
- 对AngularJS中无法直接获取Promise状态的不解
- [AngularJS] Use ng-model-options to limit $digest
- AngularJS指令参数详解
- AngularJs ngInclude、ngTransclude
- AngularJs ngIf、ngSwitch、ngHide/ngShow
- AngularJs ngReadonly、ngSelected、ngDisabled
- 慎用angular.forEach
- Angular规范
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端
- AngularJs ngList、ngRepeat、ngModelOptions