使用 Angularjs 将视图状态存储在 URL 中

将视图状态存储为 URL 的一部分的一般共识是什么（如果有）Angularjs我该如何去做呢？我有一个相当复杂的视图/路线，有许多要设置的过滤器、选项卡等，这些都会导致视图状态。

我看到了将所有这些视图组件的状态存储为 URL 的一部分的优势，以便在应用程序中更轻松地导航（导航back将恢复先前的视图以及所做的所有选择，而不从服务器加载状态，这将是一种替代方案）。另一个优点是视图状态可以添加书签。

有没有可以用来指导的模式？有人以前做过这个并且可以分享一些经验吗？我应该避免在 URL 中存储视图状态吗？

如果需要的数据可以序列化成{key, value}，然后你可以使用$location.search() http://docs.angularjs.org/api/ng.%24location#methods_search要在控制器中保存和检索此信息：

app.controller("myCtrl", function ($scope, $location, $routeParams) {
    // Load State
    var savedState = $location.search();
    allProperties.forEach(function (k) {
        if (typeof savedState[k] !== 'undefined') {
            $scope.model[k] = savedState[k];
        } else {
            $scope.model[k] = defaultValues[k];
        }
    });

    // Save the parameters
    $scope.createUrlWithCurrentState = function() {
         allProperties.forEach(function (k) {
             $location.search(k, $scope.model[k]);
         });
    });
})

现在你可以打电话createUrlWithCurrentState with ng-change每个input元素有一个ng-model每次更改都会保存状态，或者您可以在中调用此函数ng-click on Create a link to this page button.

你必须小心保存allProperties and defaultValues不过，已更新以保存所有必需的参数。

至于这是否should完成或不完成，答案取决于您的用例。如果您必须允许共享链接，那么除了在 URL 中保留状态之外，几乎没有其他选择。

然而，某些状态可能不容易序列化，或者数据可能只是太长而无法保存在 URL 中 https://stackoverflow.com/questions/2659952/maximum-length-of-http-get-request.

如果您只想保留当前会话或浏览器的检索信息，您可以查看the $cookieStore http://docs.angularjs.org/api/ngCookies.%24cookieStore or DOM 存储 API https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage.