AngularJS 1.6.1:对于大型多步表单来说，在本地存储表单的最佳方法是什么？

Question

嗨，我有一个相当大的(并且正在增长的) AngularJS表单，它由几个页面的输入组成。在后端，只有一个post端点保存到db。我目前正在使用$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'
});};

然后，我使用putObject方法在$cookies上保存数据，如下所示：

主计长：

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从ng-model(s)中填充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

这都取决于你的信息有多敏感。您的方法肯定是有效的，但是有一个基本的问题，这可能是为什么在第一个place.Generally中创建cookie的原因，敏感信息不应该存储在cookie中。

这样的信息最好存储在服务器side.If上--您没有将数据存储在数据库中，当用户清除浏览器cookie信息时，可能会丢失存储在cookie中的所有数据。

如果您想在浏览器中本地存储信息，可以考虑使用WEB 或localStorage，但是在后端存储总是比较可取的。

如果您认为使用cookie是个好主意，请考虑阅读下面的统计数据。

通常，浏览器中允许对cookie执行以下操作

总共有300块饼干，

每个cookie 4096字节，

每个域20个cookie，

每个域81920字节