AngularJS 1.6.1：为大型多步骤表单在本地存储表单数据的最佳方式是什么？

Question

您好，我有一个非常大（并且还在不断增长）的 AngularJS 表单，其中包含几页输入。在后端，只有一个保存到数据库的 post 端点。我目前正在使用$cookies 在本地保存先前步骤中的数据，以防用户想要返回并编辑某些内容。这样做是危险的还是坏主意？到目前为止它似乎工作得很好，但我担心我正在做一些我不知道的愚蠢的事情。

我正在使用components 和angular-ui-router 来路由这样的视图：

namespace NewClientForm {
angular
    .module('app', ['ui.bootstrap', 'ngCookies', 'ui.router', 'google.places', 'cwill747.phonenumber'])
    .config(function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/clientInfo');
        $stateProvider
            .state('clientInfo', {
                url: '/clientInfo',
                template: '<h3>Client Info</h1></br><clientinfo></clientinfo>'
            })
            .state('billing', {
                url: '/billing',
                template: '<h3>Billing</h1></br><billing></billing>'
            })
            .state('licensing', {
                url: '/licensing',
                template: '<h3>Licensing</h1></br><licensing></licensing>'
            })
            .state('users', {
                url: '/users',
                template: '<h3>Add Users</h1></br><users></users>'
            })
            .state('quoting', {
                url: '/quoting',
                template: '<h3>Quoting Preferences</h1></br><quoting></quoting>'
            });
    })
    .component('billing', {
        templateUrl: 'app/form/templates/billing.html',
        bindings: {},
        controller: 'FormController'
    })
    .component('clientinfo', {
        templateUrl: 'app/form/templates/clientInfo.html',
        bindings: {},
        controller: 'FormController'
    })
    .component('licensing', {
        templateUrl: 'app/form/templates/licensing.html',
        bindings: {},
        controller: 'FormController'
    })
    .component('users', {
        templateUrl: 'app/form/templates/users.html',
        bindings: {},
        controller: 'FormController'
    })
    .component('spinner', {
        templateUrl: 'app/form/templates/spinner.html',
        bindings: {},
        controller: 'FormController'
    })
    .component('quoting', {
    templateUrl: 'app/form/templates/quoting.html',
    bindings: {},
    controller: 'FormController'
});};

然后我在$cookies 上使用putObject 方法来保存这样的数据：

控制器：

save = (name: string, obj: any, configObj: any, state: string) => {
        this.$cookies.putObject(name, obj, configObj);
        this.$log.debug(this.$cookies.getAll());
        this.$state.go(state);
    };

查看：

<button class="btn btn-primary" ng-if="!clientInfoForm.$invalid"
        style="float:right;" 
        ng-click="$ctrl.save('clientInfo', $ctrl.clientInfo, {expires:$ctrl.expireDate}, 'billing')">
        Next
</button>

最后，我在我的函数中使用$cookies.getObject 从$cookie 填充我的ng-model(s)：

populateFromCookie = () => {
        this.clientInfoCookie = this.$cookies.getObject('clientInfo');            
        if (this.clientInfoCookie) {
            if (this.clientInfoCookie.hasOwnProperty('FirstName')) {
                this.clientInfo.FirstName = this.clientInfoCookie.FirstName;
            };
            if (this.clientInfoCookie.hasOwnProperty('LastName')) {
                this.clientInfo.LastName = this.clientInfoCookie.LastName;
            };
            if (this.clientInfoCookie.hasOwnProperty('title')) {
                this.clientInfo.title = this.clientInfoCookie.title;
            };
        };
    };  

任何关于我如何改进它的建设性批评或建议将不胜感激。谢谢！

Answer 1

我处理过完全相同的情况，我发现使用 sessionStorage 的大量数据对我来说是最好的解决方案。

在 What is the max size of localStorage values?

上查看此帖子

只需序列化以存储和反序列化检索和您的好去。

这样做是危险还是坏主意？

如果您正在处理敏感信息，您当然希望尽快将其发送到服务器，然后将其从您选择的存储方法中删除。

如果用户正在输入数据，在大多数情况下，他们希望他们的数据在会话期间一直存在。 sessionStorage 很好，因为只有在创建它的窗口打开时才能访问它。

Answer 2

这完全取决于您的信息的敏感程度。您的方法绝对有效，但有一个基本问题，这可能是最初创建 cookie 的原因。一般来说，敏感信息不应该存储在 cookie 中。

此类信息最好存储在服务器端。如果您没有将数据存储在数据库中，那么当用户清除其浏览器 cookie 信息时，您可能会丢失存储在 cookie 中的所有数据。

如果您想在浏览器本地存储信息，可以考虑使用 WEB SQL 或 localStorage，但最好存储在后端。

如果您认为使用 cookie 是个好主意，请考虑阅读以下统计信息。

通常情况下，浏览器中允许以下 cookie 使用

总共 300 个 cookie，

每个 cookie 4096 字节，

每个域 20 个 cookie，

每个域 81920 字节