"Angularjs最佳实践——数据存储"

22 浏览
0 Comments

"Angularjs最佳实践——数据存储"

我的 Angular 应用有两个控制器。我的问题是，当用户从页面导航离开时，控制器不会保留数据。

我该如何将其中一个控制器中选择的数据存储到数据存储区域中，以便在其他控制器之间使用？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

编辑 请参阅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"]);

0
0 Comments

选项1 - 自定义service

您可以使用专用的Angular服务，在控制器之间存储和共享数据（服务是单实例对象）

服务定义

 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 - html5localStorage

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

写入

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

阅读

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

选项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);
}

0