这次给大家带来angularjs的缓存详解，使用angularjs缓存的注意事项有哪些，下面就是实战案例，一起来看一下。
一、什么是缓存
一个缓存就是一个组件，它可以透明地存储数据，以便未来可以更快地服务于请求。
缓存能够服务的请求越多，整体系统性能就提升得越多。
二、Angular 中的缓存
2.1 $cacheFactory 简介
$cacheFactory 是一个为所有Angular服务生成缓存对象的服务。在内部， $cacheFactory 会创建一个默认的缓存对象，即使我们并没有显示地创建。
要创建一个缓存对象，可以使用 $cacheFactory 通过一个ID创建一个缓存：
var cache = $cacheFactory('myCache');
登录后复制
这个 $cacheFactory 方法可以接受两个参数：
cacheId （字符串）：这个 cacheId 就是创建缓存时的ID名称。可以通过 get() 方法使用缓存名称来引用它。
capacity ：这个容量描述了在任何给定时间要使用缓存存储并保存的缓存键值对的最大数量。
2.2 缓存对象
缓存对象自身有下列这些方法可以用来与缓存交互。
info() ： info() 方法返回缓存对象的ID、尺寸和选项。
put() ： put() 方法允许我们把任意JavaScript对象值形式的键（字符串）放进缓存中。cache.put(“hello”,”world”);
put() 方法会返回我们放入缓存中的值。
get() ： get() 方法让我们能够访问一个键对应的缓存值。如果找到了这个键，它会返回它的值；如果没有找到，它会返回 undefined 。cache.get(“hello”);
remove() ： remove() 函数用于在找到一个键值对的情况下从缓存中移除它。如果没有找到，它就会返回 undefined 。cache.remove(“hello”);
removeAll() ： removeAll() 函数用于重置缓存，同时移除所有已缓存的值。
destory() ： destory() 方法用于从 $cacheFactory 缓存注册表中移除指定缓存的所有引用。
三、$http 中的缓存
Angular的 $http 服务创建了一个带有ID为 $http 的缓存。要让 $http 请求使用默认的缓存对象很简单： $http() 方法允许我们给它传递一个 cache 参数。
3.1 默认的 $http 缓存
当数据不会经常改变时，默认的 $http 缓存就特别有用了。可以像这样设置它：
$http({ method: 'GET', url: '/api/users.json', cache: true //设置为true只是用来使用$http默认的缓存机制});
登录后复制
现在，通过 $http 到URL /api/user.json 的每个请求将会存储到默认的 $http 缓存中。这个$http 缓存中的请求键就是完整的URL路径。
如果需要，也可以操作这个默认的 $http 缓存（比如，如果我们发起的另外一个没有缓存的请求提醒我们发生了增量变化，我们就可以在默认的 $http 请求中清除这个请求）。
cache = $cacheFactory('$http' usersCache = cache.get('http://example.com/api.users.json'cache.remove('http://example.com/api.users.json'cache.removeAll();
登录后复制
var cache = $cacheFactory.get('$http'); if(cache.get('cacheData')){ console.log(cache.get('cacheData')); }else{ helloService.play().then( function (data) { cache.put("cacheData", data); //往缓存中放入数据 console.log(data); } ); }
登录后复制
3.2 自定义缓存
有时候能够对缓存有更多的控制以及针对缓存的表现创建规则，这就需要创建一个新的缓存来使用 $http 请求。
通过自定义的缓存来让 $http 请求发起请求很简单。可以采用传递缓存实例的方式，而不必传递一个布尔参数 true 给请求。
var myCache = $cacheFactory('myCache');$http({ method: 'GET', utl: '/api/users.json', cache: myCache});
登录后复制
一个小demo:定义一个缓存服务，依赖注入到你要用的控制器中，直接使用
define([ 'angularModule'],function(app){ app.factory('myCache', ['$cacheFactory', function($cacheFactory){ return $cacheFactory('myCache'); //自定义一个缓存服务 }])});
登录后复制
//自定义缓存,有缓存就从缓存里取，否则就发送请求 if(myCache.get('cacheData')){ console.log(myCache.get('cacheData')); }else{ helloService.play(myCache).then( function (data) { myCache.put("cacheData", data); console.log(data); } ); }
登录后复制
cache:只是为了可以使用默认$http的缓存机制 play : function (myCache) { return httpRequestService.request({ method : 'get', url : 'http://localhost:8080/hello/play', cache : myCache }) }
登录后复制
现在， $http 将会使用自定义的缓存而非默认缓存。
四、为 $http 设置默认缓存
每次我们想要发起一个 $http 请求时都要给它传递一个缓存实例并不方便，特别是对每个请求使用同一缓存的时候。
其实可以在模块的 .config() 方法中通过 $httpProvider 设置 $http 默认使用的缓存对象。
angular.module('myApp', []).config(function($httpProvider) { $httpProvider.defaults.cache = $cacheFactory('myCache', {capacity: 20});});
登录后复制
这个 $http 服务不再使用它为我们创建的默认缓存；它会使用我们自定义的缓存，实际上这就是一个近期缓存最久未使用算法① （Least Recently Used，LRU）。
LRU缓存根据缓存容量只保留最新的缓存数目。也就是说，我们的缓存容量为20，因此会缓存前20个请求，但是进入第21个请求时，最近最少使用的请求条目就会从缓存中被删除。这个缓存自身会负责具体哪些要维护，哪些要移除。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
知名的网站前端布局分析
在前端中的html基础知识
vue插件实现移动端轮播图
以上就是angularjs的缓存详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2780762.html
