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)中的$cookie：

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

这完全取决于您的信息的敏感程度。您的方法肯定是有效的，但有一个基本问题，这可能是为什么首先创建cookie的原因。一般来说，敏感信息并不意味着存储在cookie中。

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

如果要在浏览器中本地存储信息，可以考虑使用 WEB SQL 或 localStorage ，但始终优先存储在后端。

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

通常，浏览器允许以下内容

总共300个饼干，

每个cookie 4096个字节，

每个域20个cookie，

每个域

81920字节

Answer 2

我已处理完全相同的情况，并且使用sessionStorage找到的大量数据对我来说是最好的解决方案。

在 What is the max size of localStorage values?

上查看此帖子

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

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

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

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

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

2 个答案: