5

关于将视图状态存储为 URL 的一部分的一般（如果有的话）共识是什么，Angularjs我将如何去做？我有一个相当复杂的视图/路由，其中​​包含许多要设置的过滤器、选项卡等，它们会导致视图状态。

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

有没有可以用作指导的模式？有没有人这样做过，可以分享一些经验？我应该远离在 URL 中存储视图状态吗？

4

1 回答 1

5

如果所需的数据可以序列化为 { key, value}，那么您可以使用$location.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具有an 的元素，并且每次更改都会保存状态，或者您可以在on按钮中调用此函数。ng-changeinputng-modelng-clickCreate a link to this page

不过，您必须注意保持allProperties和defaultValues更新以保存所有必需的参数。

至于是否应该这样做，答案取决于您的用例。如果您必须允许共享链接，那么在 URL 中保持状态的选择很少。

但是，某些状态可能不容易序列化，或者数据可能太长而无法保存在 URL 中。

如果您只想保留当前会话或浏览器的检索信息，可以查看或$cookieStoreDOM Storage API。

于 2013-11-16T10:33:28.830 回答