AngularJS如何实现Model缓存？缓存机制与优化技巧解析

在AngularJS框架中，Model缓存机制是提升应用性能、减少不必要数据请求的重要手段，通过合理缓存Model数据，可以避免重复调用后端API，优化用户体验，并降低服务器负载，本文将详细解析AngularJS实现Model缓存的几种核心方式，包括其原理、适用场景及最佳实践。

基于内存的简单缓存

最基础的Model缓存方式是利用JavaScript内存变量存储已获取的数据，开发者可以在Service或Factory中创建一个对象，用于缓存从服务器返回的Model数据，当需要获取数据时，先检查缓存中是否存在，若存在则直接返回,否则发起请求并更新缓存。

实现示例：

app.factory('DataCache', function() {
  var cache = {};
  return {
    get: function(key) {
      return cache[key];
    },
    set: function(key, value) {
      cache[key] = value;
    }
  };
});

优点：实现简单，无需额外依赖，适合小型应用或临时数据缓存。
缺点：缓存生命周期与页面绑定，刷新页面后缓存失效；无法主动管理缓存过期,可能导致数据不一致。

利用$cacheFactory服务

AngularJS内置的$cacheFactory是专门用于创建缓存的强大服务，它提供了更完善的缓存管理功能，通过$cacheFactory可以创建多个命名缓存实例，支持设置缓存容量、手动清除等操作。

核心方法：

• put(key, value)：存储数据到缓存。
• get(key)：从缓存获取数据。
• remove(key)：移除指定键的缓存。
• removeAll()：清空整个缓存。
• destroy()：销毁缓存实例。

示例代码：

app.factory('UserModel', function($cacheFactory) {
  var userCache = $cacheFactory('userCache', { capacity: 100 });
  return {
    getUser: function(userId) {
      var cachedUser = userCache.get(userId);
      if (cachedUser) {
        return $q.resolve(cachedUser);
      }
      return $http.get('/api/users/' + userId).then(function(response) {
        userCache.put(userId, response.data);
        return response.data;
      });
    }
  };
});

优点：支持容量限制，避免内存溢出；可跨组件共享缓存；提供生命周期管理方法。
缺点：缓存仍存在于内存中,页面刷新后数据丢失。

结合LocalStorage/SessionStorage实现持久化缓存

对于需要长期存储的数据，可结合浏览器本地存储（如LocalStorage或SessionStorage）实现持久化缓存，通过$window服务访问本地存储，将Model数据序列化后保存,下次访问时直接读取。

实现逻辑：

1. 数据获取时,先检查LocalStorage是否存在对应数据。
2. 若存在且未过期，则直接使用；否则发起请求并更新LocalStorage。
3. 设置合理的过期时间（TTL）,避免使用过期数据。

代码示例：

app.factory('PersistentCache', function($window, $q) {
  return {
    get: function(key, ttl) {
      var item = $window.localStorage.getItem(key);
      if (item) {
        var data = JSON.parse(item);
        if (data.expireTime > Date.now()) {
          return $q.resolve(data.value);
        }
      }
      return null;
    },
    set: function(key, value, ttl) {
      var data = {
        value: value,
        expireTime: Date.now() + ttl
      };
      $window.localStorage.setItem(key, JSON.stringify(data));
    }
  };
});

优点：数据持久化，刷新页面后缓存不丢失；适合存储配置信息、用户偏好等静态数据。
缺点：存储空间有限（通常为5-10MB）；存储的是字符串，需手动处理序列化/反序列化；存在安全风险（如XSS攻击可读取数据）。

通过Interceptor拦截请求实现全局缓存

对于频繁请求的API数据，可以通过AngularJS的$http拦截器（Interceptor）实现全局缓存机制，拦截器可以统一处理请求和响应，在请求发起前检查缓存，若命中则直接返回缓存数据,否则继续请求并更新缓存。

实现步骤：

1. 创建一个缓存服务（如$cacheFactory）。
2. 注册拦截器,在请求拦截阶段检查缓存。
3. 若缓存命中，通过$q.resolve直接返回响应；否则继续请求。
4. 在响应拦截阶段将结果存入缓存。

示例代码：

app.config(function($httpProvider) {
  var apiCache = $cacheFactory('apiCache');
  $httpProvider.interceptors.push(function($q) {
    return {
      request: function(config) {
        if (config.url.indexOf('/api/') === 0) {
          var cachedData = apiCache.get(config.url);
          if (cachedData) {
            config.cached = true;
            return $q.reject({ data: cachedData, config: config, status: 304, statusText: 'From Cache' });
          }
        }
        return config;
      },
      response: function(response) {
        if (!response.config.cached && response.config.url.indexOf('/api/') === 0) {
          apiCache.put(response.config.url, response.data);
        }
        return response;
      }
    };
  });
});

优点：全局统一管理API缓存，避免重复请求；减少冗余代码，提升开发效率。
缺点：需谨慎处理缓存更新策略，可能导致数据不一致；复杂请求场景（如分页、参数变化）需特殊处理。

缓存策略对比与选择

不同的缓存方式适用于不同场景,以下是主要策略的对比：

最佳实践建议：

1. 高频访问数据：优先使用$cacheFactory或Interceptor缓存,减少网络请求。
2. 长期配置数据：结合LocalStorage存储，设置合理的过期时间（如7天）。
3. 敏感数据：避免使用LocalStorage,可采用内存缓存或加密存储。
4. 缓存更新：在数据变更时主动清除相关缓存,确保数据一致性。

通过合理组合上述缓存方式，可以有效提升AngularJS应用的性能和用户体验，开发者需根据业务场景和数据特性，选择最适合的缓存策略，并注意缓存的生命周期管理,避免因缓存导致的数据问题。