AngularJS : use local storage

Question

I want to save my web data in the local storage. I have a table which I add to it data, it works with AngularJS. I would like the data to be saved, how do I do it ?

the code : the html code :

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div ng-controller="AppCtrl" >
    <button type="button" class="btn btn-default" ng-click="openR()"> add user </button>
    <button type="button" class="btn btn-default" ng-click="openC()"> connect </button>
    <div class="btn btn-success" ng-show="User.connected">{{User.username}} is connected</div>
    <table>
        <thead>
        <th class="col-lg-3">Username</th>
        <th class="col-lg-3">Password</th>
        <th class="col-lg-3">First name</th>
        <th class="col-lg-3">Last name</th>
        </thead>
        <tbody>
        <tr ng-repeat="User in Users.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
            <td class="col-lg-3">{{User.userN}}</td>
            <td class="col-lg-3">{{User.PassW}}</td>
            <td class="col-lg-3">{{User.Name}}</td>
            <td class="col-lg-3">{{User.LastName}}</td>
        </tr>
        </tbody>
    </table>
    <div>
        <pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"></pagination>
    </div>
</div>
<script type="text/ng-template" id="table.html">
    <form ng-submit="okR()">
        <div class="modal-header" >
            <h3>users</h3>
        </div>
        <div class="modal-body">
            <div class="panel-body">
                <div class="form-group">
                    <label>Username :</label>
                    <input type="text" placeholder="Ariel73" ng-model="userN">
                </div>
                <div class="form-group">
                    <label>Password :</label>
                    <input type="text" placeholder="Aa123456" ng-model="PassW">
                </div>
                <div class="form-group">
                    <label>First name :</label>
                    <input type="text" placeholder="Ariel" ng-model="Name">
                </div>
                <div class="form-group">
                    <label>Last name :</label>
                    <input type="text" placeholder="Livshits" ng-model="LastName">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit"  class="btn btn-success">Submit</button>
            </div>
        </div>
    </form>
</script>
<script type="text/ng-template" id="connect.html">
    <form ng-submit="okC()">
        <div class="modal-header" >
            <h3>users</h3>
        </div>
        <div class="modal-body">
            <div class="panel-body">
                <div class="form-group">
                    <label>Username :</label>
                    <input type="text" placeholder="Ariel73" ng-model="username">
                </div>
                <div class="form-group">
                    <label>Password :</label>
                    <input type="text" placeholder="Aa123456" ng-model="password">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit"  class="btn btn-success">Submit</button>
            </div>
        </div>
    </form>
</script>
</body>

</html>

the angular app code :

app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('AppCtrl', function($scope, $modal, $log ) {
    $scope.Users = [{
        'userN': 'Ariel1',
        'PassW': 'Aa123456',
        'Name': 'Ariel',
        'LastName': 'Livshits'
    }, {
        'userN': 'Ariel2',
        'PassW': 'Aa123456',
        'Name': 'Ariel',
        'LastName': 'Livshits'
    }, {
        'userN': 'Ariel3',
        'PassW': 'Aa123456',
        'Name': 'Ariel',
        'LastName': 'Livshits'
    }, {
        'userN': 'Ariel4',
        'PassW': 'Aa123456',
        'Name': 'Ariel',
        'LastName': 'Livshits'
    }, {
        'userN': 'Ariel5',
        'PassW': 'Aa123456',
        'Name': 'Ariel',
        'LastName': 'Livshits'
    }, {
        'userN': 'Ariel6',
        'PassW': 'Aa123456',
        'Name': 'Ariel',
        'LastName': 'Livshits'
    }, {
        'userN': 'Ariel6',
        'PassW': 'Aa123456',
        'Name': 'Ariel',
        'LastName': 'Livshits'
    }, {
        'userN': 'Ariel6',
        'PassW': 'Aa123456',
        'Name': 'Ariel',
        'LastName': 'Livshits'
    }];

    $scope.User = {
        'username': '',
        'Password': '',
        'connected': false
    };
    $scope.viewby = 3;
    $scope.totalItems = $scope.Users.length;
    $scope.currentPage = 4;
    $scope.itemsPerPage = $scope.viewby;
    $scope.maxSize = (($scope.Users.length / 3) + 1) ; //Number of pager buttons to show

    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
    };

    $scope.pageChanged = function() {
        console.log('Page changed to: ' + $scope.currentPage);
    };

    $scope.setItemsPerPage = function(num) {
        $scope.itemsPerPage = num;
        $scope.currentPage = 1; //reset to first paghe
    };


    $scope.openR = function() {

        var modalInstance = $modal.open({
            templateUrl: 'table.html',
            controller: 'ModalInstanceCtrl'
        });
        modalInstance.result.then(function(newUser) {
            $scope.Users.push(newUser);
        }, function() {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
    $scope.openC = function() {

        var modalInstance = $modal.open({
            templateUrl: 'connect.html',
            controller: 'ModalInstanceCtrl'
        });
        modalInstance.result.then(function(conUser) {
            $scope.User = conUser;
        }, function() {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

app.controller('ModalInstanceCtrl', function($scope, $modalInstance) {
    $scope.okR = function() {
        $modalInstance.close({
            'userN': $scope.userN,
            'PassW': $scope.PassW,
            'Name': $scope.Name,
            'LastName': $scope.LastName
        });
    };

    $scope.okC = function() {
        $modalInstance.close({
            'username': $scope.username,
            'Password': $scope.password,
            'connected': true
        });
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});

I have only basic idea of local storage and learning it. But, you can find the concept in this answer stackoverflow.com/questions/18247130/… Hope it helps you :) — Arun AK
– Arun AK, Commented Sep 9, 2015 at 18:52

Ariel Livshits · Accepted Answer · 2015-09-15 13:13:14Z

14

AngularJS Service: Using window.localStorage directly is just fine, but having to set and parse Strings gets tiresome after a while. Use this simple AngularJS service for setting and retrieving strings or objects easily:

angular.module('ionic.utils', [])

.factory('$localstorage', ['$window', function($window) {
  return {
    set: function(key, value) {
      $window.localStorage[key] = value;
    },
    get: function(key, defaultValue) {
      return $window.localStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
      $window.localStorage[key] = JSON.stringify(value);
    },
    getObject: function(key) {
      return JSON.parse($window.localStorage[key] || '{}');
    }
  }
}]);

And to use this service, just inject the $localstorage service into a controller or run function:

angular.module('app', ['ionic', 'ionic.utils'])

.run(function($localstorage) {

  $localstorage.set('name', 'Max');
  console.log($localstorage.get('name'));
  $localstorage.setObject('post', {
    name: 'Thoughts',
    text: 'Today was a good day'
  });

  var post = $localstorage.getObject('post');
  console.log(post);
});

answered Sep 15, 2015 at 13:13

Ariel Livshits

5911 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dmitry Davydov Over a year ago

Here is slightly improved variant. codepen link

user3393933 Over a year ago

This looks good, but a) is there any chance of polluting the global namespace? and b) is there a size limit to how much you can store?

Ronald · Accepted Answer · 2015-09-09 19:50:37Z

0

Instead of ng-model="userN", ng-model="PassW" etc in the modal, use this: ng-model="newUser.userN", ng-model="newUser.PassW".

Then create a method like this:

$scope.saveNewUser = function(newUser) { window.localStorage.setItem("newUser", JSON.stringify(newUser)}

And change the submit action to this function.

And if you want to save the table data to localstorage:

$scope.saveUsers = function() {window.localStorage.setItem("tableData", JSON.stringify($scope.Users));}

edited Sep 9, 2015 at 19:50

answered Sep 9, 2015 at 18:49

Ronald

7845 silver badges8 bronze badges

8 Comments

Ariel Livshits Over a year ago

can you tell me where to write the line: window.localstorage.setItem("tableData", JSON.stringify($scope.Users)); because it gives me the error: TypeError: Cannot read property 'setItem' of undefined

Ronald Over a year ago

It gave an error because I used localstorage instead of localStorage.

Ariel Livshits Over a year ago

after I save it, how can i get the data from the localStroge ? I want my table to be saved and to be able to get the data after refreshing

Ronald Over a year ago

You can get the data by using window.localStorage.getItem("tableData"). But because you stringified it first, you might want to parse it first like this: $scope.Users = JSON.parse(window.localStorage.getItem("tableData"));

Ariel Livshits Over a year ago

it's just not work for me , could you put it in my code ? it will rely help me to continue

|

Marko · Accepted Answer · 2016-10-24 23:01:49Z

0

Besides using and adding localstorage as a depedency, you could just go with injecting $window dependency in whatever controller you wanna get local storage, and it doesn't require installing anything, you just go like this

For setting, you can go like

window.localStorage.setItem('key', 'value' );

For getting, you can go like

window.localStorage.getItem('key');

And if you wanna display the value, you can just wrap it in a scope and bind it in a html, like this

$scope.displayThis = window.localStorage.getItem('key');

And then you can display it in your html representation of your controller like this:

<span>{{displayThis}}</span>

answered Oct 24, 2016 at 23:01

Marko

9579 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS : use local storage

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related