CODEWITHSUNDEEP
javascripthtmlangularjs
Jubi Ki
Jubi Ki

Reputation: 21

How do I store data in local storage with AngularJS?

I wanted to store information in the local storage using AngularJS, but I haven't been able to get it working. I was wondering if anyone could help me out?

Here is my code:

    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);
    }
}])

Upvotes: 1

Views: 5497

Answers (4)

tavnab
tavnab

Reputation: 2734

If you want to avoid 3rd-party components, you actually just need to inject $window as a dependency into your controller/service/etc, which will allow you access to $window.localStorage and $window.sessionStorage.

For your example (a few details changed):

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);
    }
}])

Generally, it's a good idea to abstract these concerns to a service, so you can switch between different storage methods (e.g. localStorage vs sessionStorage vs POSTing to a server) without changing your controller code.

Upvotes: 1

Rob
Rob

Reputation: 12872

I typically save like this

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

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

Upvotes: 0

simon
simon

Reputation: 1105

Include the module "ngStorage":

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

more info about this here: https://github.com/gsklee/ngStorage

After that you can inject the $localStorage in your controller and save what you like to it.

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

Upvotes: 0

nalinc
nalinc

Reputation: 7425

Use ngStorage For All Your AngularJS Local Storage Needs

ngStorage contains two services: $localStorage and $sessionStorage.

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

Here's the Demo

Cheers!

Upvotes: 0

Related Questions