如何使用AngularJS将数据存储在本地存储中？

Question

我想使用AngularJS将信息存储在本地存储中，但是我无法使其正常运行。 我想知道是否有人可以帮助我？

这是我的代码：

    angular.module('todo', [])

.controller('ToDoCtrl', ['$scope', function($scope, $http) {
    $scope.grocerylist = [];
    $scope.priority = 'normal';

    $scope.addTask = function() {
        if(event.keyCode == 13 && $scope.groceryName) {
            $scope.grocerylist.push({"name": $scope.groceryName, "completed": false});   
            $scope.groceryName = "";
        }
    }

    $scope.deleteGrocery = function(index) {
        $scope.grocerylist.splice(index, 1);
    }
}])

Answer 1

如果要避免使用第三方组件，实际上只需要将$window作为依赖项注入到controller / service / etc中，这将允许您访问$window.localStorage和$window.sessionStorage 。

对于您的示例（一些细节已更改）：

angular.module('todo', [])

.controller('ToDoCtrl', ['$scope', '$window', function($scope, $http, $window) {
    $scope.grocerylist = $window.localStorage.getItem('grocerylist') || [];
    $scope.priority = 'normal';

    $scope.addTask = function(event) {
        if(event.keyCode == 13 && $scope.groceryName.length) {
            $scope.grocerylist.push({"name": $scope.groceryName, "completed": false});   
            $scope.groceryName = "";
            $window.localStorage.setItem('grocerylist', $scope.grocerylist);
        }
    }

    $scope.deleteGrocery = function(index) {
        $scope.grocerylist.splice(index, 1);
        $window.localStorage.setItem('grocerylist', $scope.grocerylist);
    }
}])

通常，将这些问题抽象到服务是一个好主意，因此您可以在不同的存储方法（例如localStorage vs sessionStorage vs POST到服务器）之间切换，而无需更改控制器代码。

Answer 2

使用ngStorage您所有的AngularJS本地存储需求

ngStorage包含两个服务：$ localStorage和$ sessionStorage。

angular.module('app', [
   'ngStorage'
]).controller('Ctrl', function(
    $scope,
    $localStorage,
    $sessionStorage
){});

这是演示

干杯!

Answer 3

包括模块“ ngStorage”：

angular.module('todo', ['ngStorage'])

有关此的更多信息，请访问： https : //github.com/gsklee/ngStorage

之后，您可以在控制器中注入$ localStorage并保存您喜欢的内容。

.controller('ToDoCtrl', ['$scope', function($scope, $http, $localStorage) {
//...
}

Answer 4

我通常这样保存

app.run(function($rootScope) {
    window.onbeforeunload = function(event) {
        $rootScope.$broadcast('saveState');
    };
});

$rootScope.$on('saveState', function() {
    sessionStorage.data = angular.toJson(data);
});