如何在AngularJS中本地存储数据？AngularJS 1.5替代Redux的方案

嘿，针对你的两个AngularJS问题，我来分享一些实用的方案，都是我在维护老项目时亲测有效的：

本地存储在AngularJS里有几种常用的实现方式，根据数据量和需求选就行：

• 原生Web Storage（localStorage/sessionStorage）：这是最基础的方案，直接利用浏览器的API，不需要额外依赖。为了方便在Angular里使用，通常会封装成一个服务：

  angular.module('myApp').factory('localStorageService', function() {
    return {
      set: function(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
      },
      get: function(key) {
        return JSON.parse(localStorage.getItem(key));
      },
      remove: function(key) {
        localStorage.removeItem(key);
      }
    };
  });
  

  其中localStorage是持久化存储（除非手动清除），sessionStorage只在当前浏览器会话有效，适合临时缓存数据。

• ngStorage模块：这是社区专门为AngularJS封装的Web Storage工具，省去了手动JSON序列化的麻烦，用法更简洁。引入模块后直接注入$localStorage或$sessionStorage即可：

  angular.module('myApp', ['ngStorage'])
    .controller('MyCtrl', function($localStorage) {
      $localStorage.userProfile = { name: 'John Doe', email: 'john@example.com' };
      // 后续直接访问$localStorage.userProfile就能拿到数据
    });
  

• IndexedDB：如果需要存储大量结构化数据（比如超过localStorage 5MB的限制），IndexedDB是更好的选择，它支持异步操作和索引查询。你可以用angular-indexedDB这类封装库来简化Angular里的操作，避免直接写复杂的原生IndexedDB代码。

Redux确实对老AngularJS项目来说有点重，样板代码多，下面这些轻量化方案既能实现本地存储，又能让数据全局可用，非常适合你的场景：

• 自定义单例服务封装缓存逻辑：AngularJS的服务天生是单例的，我们可以把本地存储和内存缓存结合起来，做成一个全局可用的缓存服务。这样既不用写大量样板，又能完美融入Angular的生态：

  angular.module('myApp').factory('dataCacheService', function(localStorageService) {
    // 初始化缓存：从本地存储读取已有数据
    var memoryCache = angular.extend({}, localStorageService.get('appGlobalCache') || {});
  
    return {
      // 获取缓存数据
      get: function(key) {
        return memoryCache[key];
      },
      // 设置缓存并同步到本地存储
      set: function(key, value) {
        memoryCache[key] = value;
        localStorageService.set('appGlobalCache', memoryCache);
      },
      // 带过期时间的缓存（可选，适合需要自动失效的场景）
      setWithExpiry: function(key, value, expiryMinutes) {
        memoryCache[key] = {
          data: value,
          expiryTime: Date.now() + expiryMinutes * 60000
        };
        localStorageService.set('appGlobalCache', memoryCache);
      },
      // 获取未过期的有效数据
      getValid: function(key) {
        var item = memoryCache[key];
        if (!item || Date.now() > item.expiryTime) {
          this.remove(key);
          return null;
        }
        return item.data;
      },
      // 删除缓存项
      remove: function(key) {
        delete memoryCache[key];
        localStorageService.set('appGlobalCache', memoryCache);
      }
    };
  });
  

  之后在任何控制器、指令或服务里注入dataCacheService，就能全局访问和修改缓存数据，同时自动同步到本地存储，完全满足你的需求。

• 使用AngularJS内置的$cacheFactory：官方提供的原生缓存服务，不需要额外依赖，可以用来缓存AJAX响应或任意数据。比如全局配置$http缓存：

  angular.module('myApp').config(function($httpProvider) {
    var httpCache = $cacheFactory('apiCache');
    $httpProvider.defaults.cache = httpCache;
  });
  

  或者手动控制缓存逻辑：

  angular.module('myApp').controller('UsersCtrl', function($http, $cacheFactory) {
    var apiCache = $cacheFactory.get('apiCache');
    var cachedUsers = apiCache.get('/api/users');
  
    if (cachedUsers) {
      // 直接使用缓存数据渲染页面
      $scope.users = cachedUsers;
    } else {
      $http.get('/api/users').then(function(response) {
        apiCache.put('/api/users', response.data);
        $scope.users = response.data;
      });
    }
  });
  

  这个方案简单直接，适合快速减少重复的AJAX请求。

• 结合UI-Router的resolve做路由级缓存：如果你的数据是和路由绑定的，可以在ui-router的resolve阶段检查缓存，没有数据再发起请求。这样用户多次进入同一路由时，只会请求一次服务器：

  angular.module('myApp').config(function($stateProvider) {
    $stateProvider.state('userList', {
      url: '/users',
      templateUrl: 'user-list.html',
      controller: 'UsersCtrl',
      resolve: {
        userData: function(dataCacheService, $http) {
          var cachedData = dataCacheService.get('userList');
          if (cachedData) {
            return cachedData;
          }
          return $http.get('/api/users').then(function(res) {
            dataCacheService.set('userList', res.data);
            return res.data;
          });
        }
      }
    });
  });
  

  这种方式能让路由加载更高效，用户体验更好。

• 轻量级缓存库：angular-cache：这是专门为AngularJS设计的缓存库，支持内存、localStorage、sessionStorage三种存储模式，还能配置过期策略，比Redux简单太多。用法示例：

  angular.module('myApp', ['angular-cache'])
    .controller('ProfileCtrl', function(CacheFactory) {
      // 创建一个本地存储的缓存实例，1小时过期
      var profileCache = CacheFactory('profileCache', {
        storageMode: 'localStorage',
        maxAge: 60 * 60 * 1000,
        deleteOnExpire: 'aggressive'
      });
  
      // 缓存用户数据
      profileCache.put('currentUser', { id: 123, name: 'Jane Smith' });
      // 获取缓存数据
      $scope.user = profileCache.get('currentUser');
    });
  

内容的提问来源于stack exchange，提问作者bier hier