如何在 angularjs 中存储和检索搜索参数

How to store and retrieve search parameters in angularjs?

本文关键字:检索 搜索 参数 存储 angularjs      更新时间:2023-09-26

我有一个 Angular 应用程序,我有时想:

  • 为当前显示的页面存储当前输入的表单变量。这可以是搜索词或其他用户输入。
  • 如果用户返回历史记录,请确保再次使用相同的搜索参数

我查看了ngRoute,stateProvider和html历史,但没有找到一个好方法。它看起来像是应该相当普遍的东西,所以我想我只是不明白该怎么做。

根据您的描述,我看到了几种可以做到这一点的方法。

大多数浏览器都支持LocalStorage,即使如此,它也有polyfills。这意味着您使用名称/值对进行存储。

下面是一个快速示例:

var searchParameters = {
  filters: [
    'recent'
  ],
  searchString: 'bacon'
}
// Store the value(s)
localStorage.setItem('searchParameters', JSON.stringify(searchParameters));
// Retrieve the value(s)
searchParameters = JSON.parse(localStorage.getItem('searchParameters'));
// Delete the value(s)
localStorage.removeItem('searchParameters');

根据您的流程,您可以使用浏览器历史记录堆栈。因此,如果有人搜索bacon那么您可以将他们发送到附加?query=bacon的页面。这将使您能够轻松维护历史记录并允许轻松使用后退按钮。归根结底,这一切都归结为如何设置您的应用程序,以及什么是最佳选择。根据要求,还有其他方法可以实现此目的。例如,如果需要跨设备同步,则需要实现服务器端组件来存储值并检索它们。

为了在当前的项目中处理这个问题,我们声明了一个指令,该指令监视模型并将此值绑定到数据服务中的变量。此外,在呈现时,此指令检查是否已在数据服务中设置了适当的值。如果是这样,则模型将为此值。

根据评论中的要求,我的StorageService

'use strict';
/**
 * storage wrapper for session- or local-storage operations
 */
app.factory('StorageService', function(
        $rootScope,
        $http,
        $location) {
    /**
     * get an item
     *
     * @param item - string - the item identifier
     * @return - mixed -
     */
    var get = function(item) {
        return JSON.parse(sessionStorage.getItem(item) ||localStorage.getItem(item));
    };
    /**
     * set an item
     *
     * @param item - string - the item identifier
     * @param value - mixed - the value to set
     * @param usePersistentStorage - boolean - the flag for session- or local-storage
     * @return void
     */
    var set = function(item, value, usePersistentStorage) {
        var obj = {
            value: value,
            ts: new Date().getTime()
        };
        window[usePersistentStorage ? 'localStorage' : 'sessionStorage'][value === null ? 'removeItem' : 'setItem'](item, JSON.stringify(obj));
    };
    /**
     * remove an item
     *
     * @param item - string - the item identifier
     * @return void
     */
    var remove = function(item) {
        set(item, null, true);
        set(item, null);
    };
    /**
     * clear the whole session- and local-storage
     *
     * @return void
     */
    var clear = function() {
        sessionStorage.clear();
        localStorage.clear();
    };
    /**
     * check if item has expired
     *
     * @return boolean
     */
    var checkExpiration = function(str, minutes) {
        var now = new Date(),
            nowts = now.getTime(),
            item = get(str);
        if(item && typeof item.ts != 'undefined' && (new Date(nowts) - new Date(item.ts) < minutes * 60 * 1000)) {
            return true;
        } else {
            remove(str);
            return false;
        }
    };
    return {
        get: get,
        set: set,
        remove: remove,
        clear: clear,
        checkExpiration: checkExpiration
    };
}

);

我过去通过让一个服务将视图状态保存在对象中来保存视图状态。

对我要维护的字段的任何引用(如表的排序列或特定字段的值)都将保存在服务的视图状态对象中,而不是保存在控制器/作用域中。

控制器在初始化时会通过查找特定的 url 参数或状态(例如 #/search?type=new)来检查页面传输的"源"或"类型"。如果将其视为新搜索,它将重置值。否则,它将显示并使用以前使用的值。

应用程序重新加载将清除服务中的数据,从而提供全新的形式。


我上面描述的方法很简单,因为 angular 为您处理节省。服务是单例,因此通过直接绑定到服务的字段,它将自动承受路由更改。

在您看来:

<input ng-model="criteria.firstName">    

在控制器初始化中:

$scope.criteria = ViewStateService.criteria;

如果您希望仅在特定点保存视图状态,则可以在页面更改/路由更改事件上设置事件处理程序,并在该点执行数据副本。

$scope.$on('$locationChangeStart', function(next, current) {
    //code to copy/save fields you want to the Service.
});

如何在 AngularJS 中观察路由变化

有几种方法,其中两种似乎非常可靠。我最终为我的应用程序选择了第一种方法,因为我的搜索参数需要传播到其他控制器。

将它们存储在饼干中

Angular.js提供了允许在浏览器上获取/设置参数的$cookies。我将其用作搜索参数的真正来源。

例如:

搜索服务.js

angular
    .module('app')
    .service('SearchService', SearchService);

    SearchService.$inject = [
        '$cookies'
    ];
    function SearchService(
        $cookies
    ) {
    var searchCookieKey = 'searchHistoryCookieKey';
    var searchCookieMaxSize = 10;
    return {
        search: search,
        getSearchHistory: getSearchHistory
    };
    function search(arg1, arg2) {
        storeSearchHistory({arg1: arg1, arg2: arg2});
        // do your search here
        // also, you should cache your search so 
        // when you use the 'most recent' params
        // then it won't create another network request 
    }
    // Store search params in cookies
    function storeSearchHistory(params) {
        var history = getSearchHistory();
        history.unshift(params); // first one is most recent
        if(history.length > searchCookieMaxSize) {
            history.pop();
        }
        $cookies.putObject(searchCookieKey, history);
    }
    // Get recent history from cookies
    function getSearchHistory() {
        return $cookies.getObject(searchCookieKey) || [];
    }
}

应用状态.js

   .state('search', {
        url: "/search",
        templateUrl: "/dashboard/search/templates/index.html",
        controller: 'SearchController',
        resolve: {
            searchResults: ['SearchService', '$stateParams', function(SearchService, $stateParams) {
                if(!$stateParams.arg1 || !$stateParams.arg2) {
                    var history = SearchService.getSearchHistory();
                    var mostRecent = history.length ? history[0] : null;
                    if(mostRecent) {
                        return SearchService.search(mostRecent.arg1, mostRecent.arg2);
                    }
                }
                return SearchService.search($stateParams.arg1, $stateParams.arg2);
            }]
        }
    })

如果不缓存这些搜索网络调用,则应用将需要等待请求返回,从而降低应用速度。

在状态中传递它们

您可以创建一个父控制器来保存您的$stateParams子控制器将继承参数。在后退/前进或在子状态之间访问时,不会覆盖参数。但是,当您使用特定参数移动状态时,它们将被覆盖。因此,在状态之间移动时,您只需要明确指定这些父级的$stateParams