关闭

angularjs 缓存详解

时间: 2018-03-19阅读: 1447标签: 缓存

一、什么是缓存

一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。缓存能够服务的请求越多,整体系统性能就提升得越多。

 

二、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 请求中清除这个请求)。

为了引用 $http 的默认请求,只需通过 $cacheFactory() 使用ID来获取到该缓存:
var cache = $cacheFactory('$http');

对于所掌控的缓存,我们可以在需要时进行所有的正常操作,比如检索已缓存的响应,从缓存中清除条目,或者消除所有缓存的引用。
// 获取上一次请求的缓存
var 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个请求时,最近最少使用的请求条目就会从缓存中被删除。这个缓存自身会负责具体哪些要维护,哪些要移除。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/516

关闭

彻底理解浏览器缓存机制

浏览器的缓存机制也就是我们说的 HTTP 缓存机制,其机制是根据 HTTP 报文的缓存标示进行的。所以在分析浏览器缓存之前,我们先使用图文简单介绍一下 HTTP 报文,HTTP 报文分为两种:

浏览器缓存问题原理以及解决方案

浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中,为什么使用缓存:减少网络带宽消耗,降低服务器压力,减少网络延迟,加快页面打开速度

JavaScript中的缓存API

了解如何使用JavaScript中的Cache API缓存资源。Cache API允许服务工作者对要缓存的资源(HTML页面、CSS、JavaScript文件、图片、JSON等)进行控制。通过Cache API,服务工作者可以缓存资源以供脱机使用,并在以后检索它们。

vue后台管理系统解决keep-alive页面路由参数变化时缓存问题

一个后台管理系统,一个列表页A路由配置需要缓存,另一个页面B里面有多个跳转到A路由的链接。问题描述:首先访问/A?id=1页面,然后到B页面再点击访问A?id=2的页面,发现由于页面A设置了缓存,数据还是id=1的数据,并没有更新。

html强制清缓存

。在开发时候经常遇到一个问题,我们根据版本号去控制缓存问题,当我们发布新版本,使用心得版本号的时候,发现html里面引用的版本号却是旧的版本号 ,原来是该html文件被缓存了,很多时候我们设置禁止html文件被缓存,但依然会出现被缓存的情况。

前端静态资源自动化处理版本号防缓存

浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。

缓存命中率过低;大量缓存项同时刷新;刷新同一个缓存项

缓存的作用是在内存中临时存储来自外部系统(如数据库)的数据,以便让请求更快的得到响应。如果请求数据在缓存中不存在,或者已经超时失效,那么也要从外部系统查询,然后放入缓存中,这个过程叫刷新缓存。

Nginx禁止html等缓存

在本地开发的时候,经常会碰到缓存引起的莫名其妙的问题,最暴力的方式就是清掉浏览器的缓存,或者使用Ctrl + F5,Shift + F5强制刷新页面。 有时候按了好几下,缓存还是清不掉,只能暂时禁用浏览器静态资源缓存了

html页面清除缓存

页面打开时,由于缓存的存在,刚刚更新的数据有时无法在页面得到刷新,当这个页面作为模式窗口被打开时问题更为明显, 如何将缓存清掉?

给url加时间戳,骗过浏览器缓存

修改js的时候总是因为浏览器不刷新缓存,导致修改无效。URL后面添加随机数通常用于防止客户端(浏览器)缓存页面。 浏览器缓存是基于url进行缓存的,如果页面允许缓存

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!