javascript - 使用 Angularjs 在 URL 中存储 View 状态

Question

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

我看到了将所有这些 View 组件的状态存储为 URL 的一部分的优势，这样可以在应用程序中更轻松地导航(导航 back 将恢复之前的 View ，其中包含所有选择而无需加载来自服务器的状态，这将是一个替代方案)。另一个优点是 View 状态可以添加书签。

是否有一种模式可供我用作指导？有没有人以前做过这个并且可以分享一些经验？我应该避免在 URL 中存储 View 状态吗？

Answer 1

如果需要的数据可以序列化为{ key, value }，那么可以使用$location.search()在您的 Controller 中保存和检索此信息:

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-model 的 input 元素调用 ng-change每次更改都会保存状态，或者您可以在 ng-click 中的 Create a link to this page 按钮上调用此函数。

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

---

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

然而，一些状态可能不容易序列化或者数据可能just be too long to save in the URL .

如果只想保留当前 session 或浏览器的检索信息，可以查看the $cookieStore或 the DOM Storage API .