Angularjs数据存储的最佳实践

Question

我的角应用程序有2个控制器.我的问题是,当用户离开页面时,控制器不会保留数据.

如何将控制器上的选定数据存储到数据存储中,以便在其他控制器之间使用？

Answer 1

选项1 - 自定义 service

您可以利用专用的角度服务在控制器(服务)之间存储和共享数据是单实例对象)

服务定义

 app.service('commonService', function ($http) {

        var info;

        return {
            getInfo: getInfo,
            setInfo: setInfo
        };

        // .................

        function getInfo() {
            return info;
        }

        function setInfo(value) {
            info = value;
        }
});

用于多个控制器

app.controller("HomeController", function ($scope, commonService) {

    $scope.setInfo = function(value){
        commonService.setInfo(value);
    };

});


app.controller("MyController", function ($scope, commonService) {

    $scope.info = commonService.getInfo();

});

选项2 - html5 localStorage

您可以使用内置浏览器本地存储并从任何地方存储数据

写作

$window.localStorage['my-data'] = 'hello world';

读

var data = $window.localStorage['my-data']
// ...

• 看看这个很棒的项目:https: //github.com/grevory/angular-local-storage

选项3 - 通过Web服务器API

如果需要在不同用户之间保存数据,则应将其保存在服务器端的某个位置(db/cache)

function getProfile() {
    return $http.get(commonService.baseApi + '/api/profile/');
}

function updateProfile(data) {
    var json = angular.toJson(data);
    return $http.post(commonService.baseApi + '/api/profile/', json);
}

Answer 2

编辑请参阅Jossef Harush的回答,他写了深入的回复,其中包括其他方法,包括这一方法.

我建议使用localStorage或sessionStorage - http://www.w3schools.com/html/html5_webstorage.asp.

HTML本地存储提供了两个用于在客户端上存储数据的对象:

• window.localStorage - 存储没有过期日期的数据
• window.sessionStorage - 存储一个会话的数据(浏览器选项卡关闭时数据丢失)

这假设您不希望将数据POST/PUT到您的Web服务(在您的问题中提到Windows服务).

如果您的数据是数组或某种类型,您可以将其转换为JSON以存储为字符串,然后在需要时您可以按如下方式将其解析 - 如何在localStorage中存储数组？:

var names = [];
names[0] = prompt("New member name?");
localStorage["names"] = JSON.stringify(names);

//...
var storedNames = JSON.parse(localStorage["names"]);