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

这完全取决于您的信息的敏感程度。您的方法绝对有效，但有一个根本问题，这可能是第一个 place.Generally 创建 cookie 的原因，敏感信息不应存储在 cookie 中。

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

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

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

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

总共 300 个饼干，

每个 cookie 4096 字节，

每个域 20 个 cookie，

每个域 81920 字节

Answer 2

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

在 What is the max size of localStorage values?

上查看此 post

只需序列化即可存储并在检索时反序列化，一切顺利。

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

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

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

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

AngularJS 1.6.1: What is the best way to store form-data locally for a large, multi-step form?

cookies

angularjs

angular-ui-router

angularjs-components