Angular中的缓存

晋涛

2023-12-01

缓存的功能就是加快获取内容的速度，减少重复请求，这是一项非常重要的作用。
因此,angularJS框架中，提供了专门的服务—— $cacheFactory来生成缓存，同时，$ http服务中还存在缓存中可以开启缓存、自定义缓存名称.
info方法
info方法返回缓存对象的一些信息，包括大小、名称、代码如下。

var cache = $cacheFactory("test");
console.log(cache.info));

第一行创建了一个名为test的缓存对象，并将该对象保存至cache变量中;
第二行，调用了info()方法,在控制台输出缓存对象的大小和名称信息，输出内容如下。
// Obiect {id: “test”,size: 0}
因为只创建了一个名为test的缓存对象，还没有写入内存，因此，他的大小为0.

put方法
put方法可以向缓存对象中以key/value的形式添加缓存内容。

cache.put("c1","hello");
console.log(cache.put("c1","hello"));

第一行表示通过调用put方法向cache对象中添加一个键名为c1、键值为”hello”的缓存内容，整个方法还将返回添加后的键值
// hello

get方法
get方法可以获取键名对应的键值内容，
console.log(cache.get(“c1”));
console.log(cache.get(“c2”));
第一行输出键名为”c1”的对应的值，即hello
第二行，由于没有添加为”c2”的键名，因此找不到对应的键值，则返回一个undefind字符。

remove方法
remove方法可以移除指定键名的缓存

cache.remove("c1");
console.log(cache.get("c1"));

第一行表示移除键名”c1”对应的缓存内容，由于已经移除了键名为”c1”的缓存，因此将在第2行中控制台输出undefined字符。

removeAll和destory方法
removeAll方法用于移除全部的缓存内容，并重置缓存结构;
destory方法则是从$cacheFactory缓存注册表中删除所有的缓存引用条目，并重置缓存对象。

举个例子

<!DOCTYPE html>
<html ng-app="a7_4">
<head>
    <title>$cacheFactory服务创建缓存对象</title>
    <script src="../Script/angular.min.js"></script>
    <link href="Css/css7.css" rel="stylesheet" />
</head>
<body>
    <div class="frame" ng-controller="c7_4">
        <div class="show">
            <input type="text" ng-model="cname" size="6" />
            <button ng-click="cset()">设置</button>
            <button ng-click="cshow()">显示</button>
            <button ng-click="cdel()">删除</button>
            <div class="tip">缓存值是：{{cvalue}}</div>
        </div>
    </div>
    <script type="text/javascript">
        angular.module('a7_4', [])
              .service("cache", function ($cacheFactory) {
                  return $cacheFactory("test");
              })
             .controller('c7_4', function ($scope, cache) {
                 $scope.cset = function () {
                     cache.put("mytest", $scope.cname);
                 }
                 $scope.cshow = function () {
                     var tcache = cache.get("mytest");
                     $scope.cvalue = tcache ? tcache : "空值";
                 }
                 $scope.cdel = function () {
                     cache.remove("mytest");
                 }
             });
    </script>
</body>
</html>

源码解析：
①首先创建一个名为”cache”的服务，该服务返回一个名为“test”的缓存对象，用于控制器中注入。
②在控制器中，注入cache服务，获取缓存对象，同事，定义3个方法，分别绑定页面中的“设置”“显示”“删除”按钮；
③在绑定“设置”的方法中，使用put方法将文本框中的内容作为键名为”mytest”对应的键值添加到缓存中。
④在显示方法中，使用get方法先获取键名为“mytest”的缓存值，再检测该值是否为”undefined”，
如果是则显示“空值”字样，否则，显示，键名对应的缓存值；
在绑定的“删除”的方法中，使用remove方法直接移除指定键名的缓存内容。

$http服务中缓存

<!DOCTYPE html>
<html ng-app="a7_5">
<head>
    <title>$http服务中的缓存</title>
    <script src="../Script/angular.min.js"></script>
    <link href="Css/css7.css" rel="stylesheet" />
</head>
<body>
    <div class="frame" ng-controller="c7_5">
        <div class="show">
            <div class="tip">接收内容是：{{result}}</div>
            <div class="tip">缓存内容是：{{cache}}</div>
        </div>
    </div>
    <script type="text/javascript">
        angular.module('a7_5', [])
             .controller('c7_5', function ($scope, $http,
$cacheFactory) {
                 var url = 'data/cache.php';
                 var cache = $cacheFactory.get("$http");
                 $http({
                     method: 'GET',
                     url: url,
                     cache: true
                 }).success(function (data, status, headers,
config) {
                     $scope.result = data;
                     var arrResp = cache.get(url);
                     $scope.cache = arrResp[0] + "_" + arrResp[1];
                 })
             });
    </script>
</body>
</html>

为了在开启缓存后，获取缓存对象的内容，
①首先，构建控制器代码时，注入$cacheFactory服务，通过调用该服务的get方法，获取名为"$http"的缓存对象，该对象是在调用$http方法时，由angular内部自动创建的。
②在调用$http方法向服务端发送HTTP请求时，向配置对象中添加"chche"属性，并将它的属性值设置为true.
③通过这样的配置，当HTTP请求发送成功后，服务端返回的全部原始数据将自动被添加到URL为键名的缓存对象中。
④调用缓存对象中get方法，获取以URL为键名的缓存内容。从执行结果来看，这些缓存内容包含了服务端在执行HTTP请求返回客户端的全部信息，如时间、返回体和头信息等，由于是以数组形式进行保存的，因此，需要使用索引号获取指定显示的内容。

自定义$http服务中缓存

<!DOCTYPE html>
<html ng-app="a7_6">
<head>
    <title>自定义$http服务中的缓存</title>
    <script src="../Script/angular.min.js"></script>
    <link href="Css/css7.css" rel="stylesheet" />
</head>
<body>
    <div class="frame" ng-controller="c7_6">
        <div class="show">
            <div class="tip">接收内容是：{{result}}</div>
            <button ng-click="refresh()">刷新</button>
        </div>
    </div>
    <script type="text/javascript">
        angular.module('a7_6', [])
            .service("cache", function ($cacheFactory) {
                return $cacheFactory("mycache", { capacity: 3 })
            })
           .controller('c7_6', function ($scope, $http, cache) {
               var url = 'data/cache.php';
               $http({
                   method: 'GET',
                   url: url,
                   cache: cache
               }).success(function (data, status, headers,
config) {
                   $scope.result = data;
                   cache.put("c", data);
               })
               $scope.refresh = function () {
                   var _c = cache.get("c");
                   $scope.result = (_c) ? _c + "(来源缓存)" :
"刷新失败!";
               }
           });
    </script>
</body>
</html>

①首先、创建一项名为"cache"的服务，该服务返回一个自定义名称为"mycache"的缓存实例；并将缓存实例的最大容量定义为3次，用于控制器的注入。
②在构建控制器代码时，注入cache服务，并将配置对象中的"cache"属性值设置为cache服务对象，实现缓存实例传递的功能。
③当HTTP请求成功后，不仅在页面中显示返回的数据，而且还调用缓存对象中put方法将服务端返回的数据添加到键名为"c"的缓存中。

需要说明的是，无论是默认还是自定义的缓存对象，他们仅保存在一次请求中，没有保存在内存或文件中，因此，一旦刷新了页面，原来的缓存都将丢失。

Angular中的缓存

相关阅读

相关文章

相关问答

相关文档