导航回来而不会丢失单页面应用程序中的信息

Question

我有一个单页面应用程序，其中一个页面是一个搜索功能，可以显示联系信息，可以编辑，删除这些结果等。

目前，如果我正在做一些事情，例如编辑联系信息，并且我想回到搜索页面的任何原因，我将失去搜索并且必须再次输入。

我的问题是，有没有办法改变浏览器后退按钮的行为以保留搜索字段中的信息？或者更容易在某种软件中进行编码＆＃34;页面上的后退按钮带我回来？

非常感谢示例，并提前感谢您。

Answer 1

超简单的服务示例，它将搜索输入直接绑定到服务中的属性。

如果需要localStorage支持页面加载持久性应该将方法绑定到ng-change或使用ngStorage模块直接绑定到localStorage

angular
  .module('myApp', [])
  .service('searchService', searchService)
  .controller('searchCtrl', searchCtrl)

function searchService($http /* and any other injections needed*/ ) {
  this.state = {
    searchTerm = ''// pull value from localStorage if desired and modify to use setter bound to change event to update localStorage
  }; 

  // add any methods for $http if needed
  this.updateServer = function(value) {
    return $http.post(....
    }
  }
}

function searchCtrl($scope, searchService) {
  // since is object updating any properrties in view will be inherited in service
  $scope.state = searchService.state
}

查看

<input ng-model="state.searchTerm">

Answer 2

您可以将redux与redux-persist结合使用，以便在使用浏览器中的本地存储进行导航后，您的应用程序状态将保持不变。

https://github.com/reactjs/redux/tree/master/docs

https://github.com/rt2zz/redux-persist

redux的角度绑定： https://github.com/angular-redux/ng-redux