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

Question

关于将视图状态存储为URL的一部分的一般(如果有的话)共识是什么Angularjs以及我将如何去做？我有一个相当复杂的视图/路由,有许多过滤器可供设置,制表符等导致视图状态.

我看到将所有这些视图组件的状态作为URL的一部分存储在应用程序中的更简单导航中的优势(导航back将恢复以前的视图,所有选择都是在不从服务器加载状态的情况下进行的,这将是一种替代方案) .另一个优点是视图状态变为可收藏的.

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

Answer 1

如果可以将所需数据重新分类为{ 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与ng-change每个input具有一个元素ng-model和状态会和每一个变化被保存,或者你可以调用这个函数中ng-click的Create a link to this page按钮.

但是,您必须注意保持allProperties和defaultValues更新以保存所有必需的参数.

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

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

如果你想只保留当前会话或浏览器中检索信息,你可以看看的$cookieStore或在DOM存储API.