Javascript 保存$location参数状态AngularJS

如何使用

pushState

在应用程序的整个生命周期中保存URL参数状态

页面加载

通过

href

submitSearch（）

通过过滤器字段，其中

$location.search（字段）

通过

href

通过

href

搜索参数设置回上次的状态

这是某个地方的内置功能吗

---

如果不是，那么最好的方法是什么？

最简单的方法是使用cookies，angularjs为此提供包装服务。 只需转到“/search”即可使用“$cookieStore.put（）”保存当前URL参数，一旦返回，就可以使用“$cookieStore.get（）”获得所需的内容

---

如果您计划通过pushState创建一个单页网站，请参阅

上的文档，您可能希望深入了解$routeProvider（）

为了进一步深入兔子洞，我建议查看ui路由器模块：（）$stateProvider（来自ui router）和$routeProvider的工作原理非常相似，因此有时ui router文档可以提供您在$routeProvider的糟糕文档中找不到的见解

我建议一页一页地浏览五页的ui路由器文档（）

在所有这些序言之后，这里是一个实际的例子：您将建立一个保存历史数据的工厂，并使用$routeProvider/$stateProvider中定义的控制器来访问和操作该数据

注：该工厂是一家服务性企业。服务并不总是一个工厂。名称空间是：

angular.module.<servicetype[factory|provider|service]>. 

代码将类似于：

// Warning: pseudo-code
// Defining states
$stateProvider
  .state("root", {
    url: "/",
    // Any service can be injected into this controller.
    // You can also define the controller separately and use
    // "controller: "<NameOfController>" to reference it.
    controller: function(History){
      // History.header factory
      History.pages.push(History.currentPage);
      History.currentPage = "/";
    }
  })
  .state("search", {
    url: "/search",
    controller: function(History, $routeParams) {
      History.lastSearch = $routeParams
    }
  });

app.factory('<FactoryName>',function(){
  var serviceObjectSingleton = {
    pages: []
    currentPage: ""
    lastSearch: {}
  }
  return serviceObjectSingleton
})

//警告：伪代码
//界定国家
$stateProvider
.state（“根”{
网址：“/”，
//任何服务都可以注入此控制器。
//也可以单独定义控制器并使用
//控制器：“”以引用它。
控制器：功能（历史记录）{
//历史。标题工厂
History.pages.push（History.currentPage）；
History.currentPage=“/”；
}
})
.state（“搜索”{
url:“/search”，
控制器：功能（历史记录，$routeParams）{
History.lastSearch=$routeParams
}
});
应用程序工厂（“”，函数（）{
var serviceObjectSingleton={
页码：[]
当前页：“
上次搜索：{}
}
返回serviceObjectSingleton
})

---

如果你想知道$routeProvider和$stateProvider之间的区别是什么，那就是$stateProvider有更多的功能，主要是嵌套的状态和视图……我想。

我做了一个

locationState

服务，你只需给它你想要保留的值，它就会将它们存储在URL中。这样你就可以存储你所看到的所有状态ant跨越应用程序中的所有路线

像这样使用它：

angular.module('yourapp')
.controller('YourCtrl', function ($scope, locationState) {
  var size = locationState.get('size');
  ;
  // ... init your scope here
  if (size) {
      $scope.size = size;
  }
  // ...and watch for changes
  $scope.$watch('size', locationState.setter('size'));
}

代码如下：

// Store state in the url search string, JSON encoded per var
// This usurps the search string so don't use it for anything else
// Simple get()/set() semantics
// Also provides a setter that you can feed to $watch
angular.module('yourapp')
.service('locationState', function ($location, $rootScope) {
    var searchVars = $location.search()
    , state = {}
    , key
    , value
    , dateVal
    ;

    // Parse search string
    for (var k in searchVars) {
        key = decodeURIComponent(k);
        try {
            value = JSON.parse(decodeURIComponent(searchVars[k]));
        } catch (e) {
            // ignore this key+value
            continue;
        }
        // If it smells like a date, parse it
        if (/[0-9T:.-]{23}Z/.test(value)) {
            dateVal = new Date(value);
            // Annoying way to test for valid date
            if (!isNaN(dateVal.getTime())) {
                value = dateVal;
            }
        }
        state[key] = value;
    }

    $rootScope.$on('$routeChangeSuccess', function() {
        $location.search(searchVars);
    });

    this.get = function (key) {
        return state[key];
    };
    this.set = function (key, value) {
        state[key] = value;
        searchVars[encodeURIComponent(key)] = JSON.stringify(value);
        // TODO verify that all the URI encoding etc works. Is there a mock $location?
        $location.search(searchVars);
    };
    this.setter = function (key) {
        var _this = this;
        return function (value) {
            _this.set(key, value);
        };
    };
});

---

你知道$Cookie现在是否持续在1.1.5？我记得听说他们还没有完全支持这一点。考虑到1.1。x版本是不稳定的，但是Cookies目前被支持，我在盎格鲁JS项目（1.1.5）上使用它们。不管怎样，你可以使用JavaScript本机“cookies”，或者JavaScript原生“本地存储”。“。如果您想通过不同的页面存储信息（而不通过URL传递信息），本地存储是唯一的方法（据我所知），您能为这个示例提供一个plunker吗？：）当用户关闭浏览器时，这种情况不会持续，对吗？这并不是一个要求——我只是想理解灵活性。是否有使用cookie配置持久性的选项？不，这些服务不会持久化。要使数据持久化，我认为这就像将历史记录服务中的数据分配给cookie并在页面加载时将其取出一样简单。。。但我自己还没有打开那罐虫子，我还没有弄明白它的“棱角方式”。还有：我很想做这个，但我就是没有时间。

// Store state in the url search string, JSON encoded per var
// This usurps the search string so don't use it for anything else
// Simple get()/set() semantics
// Also provides a setter that you can feed to $watch
angular.module('yourapp')
.service('locationState', function ($location, $rootScope) {
    var searchVars = $location.search()
    , state = {}
    , key
    , value
    , dateVal
    ;

    // Parse search string
    for (var k in searchVars) {
        key = decodeURIComponent(k);
        try {
            value = JSON.parse(decodeURIComponent(searchVars[k]));
        } catch (e) {
            // ignore this key+value
            continue;
        }
        // If it smells like a date, parse it
        if (/[0-9T:.-]{23}Z/.test(value)) {
            dateVal = new Date(value);
            // Annoying way to test for valid date
            if (!isNaN(dateVal.getTime())) {
                value = dateVal;
            }
        }
        state[key] = value;
    }

    $rootScope.$on('$routeChangeSuccess', function() {
        $location.search(searchVars);
    });

    this.get = function (key) {
        return state[key];
    };
    this.set = function (key, value) {
        state[key] = value;
        searchVars[encodeURIComponent(key)] = JSON.stringify(value);
        // TODO verify that all the URI encoding etc works. Is there a mock $location?
        $location.search(searchVars);
    };
    this.setter = function (key) {
        var _this = this;
        return function (value) {
            _this.set(key, value);
        };
    };
});