How to save data in localStorage with AngularJS?

Question

I'm starting with AngularJS and have my first problem with it.

How can I bind or save username and password in the localStorage? My form is empty after reloading the page or restarting the app.

I'm using this plugin: https://github.com/grevory/angular-local-storage

HTML:

<input type="text" name="cy_username" id="cy_username" ng-model="username">
<input type="password" name="cy_password" id="cy_password" ng-model="password">
        <button class="button button-block button-positive icon ion-edit icon-left" ng-click="saveSettings()">Einstellungen
            speichern
        </button>
        <button class="button button-block button-assertive icon ion-trash-b icon-left" ng-click="resetSettings()">
            Einstellungen löschen
        </button>

Controller:

angular.module('starter.controllers', ['LocalStorageModule'])

    .controller('SettingsCtrl', function ($scope, localStorageService) {
        $scope.username = localStorageService.get('username');
        $scope.password = localStorageService.get('password');


        $scope.saveSettings = function () {
            if (localStorageService.isSupported) {
                localStorageService.set('username', $scope.username);
                localStorageService.set('password', $scope.password);
            } else {
                console.error('localStorage is not supported!');
            }
        };

        // doesn't work, nothing happens
        $scope.resetSettings = function () {
            $scope.username = '';
            $scope.password = '';
            localStorageService.clearAll();
        };
    });

What you are wanting to do is a bad idea from a security standpoint. You should NEVER store both the username and password anywhere in your app, especially in localStorage or a cookie. Log the user in, and then store a unique session ID that you can refer to. Those values belong in a database and thoroughly encrypted. — MBielski
– MBielski, Commented Mar 25, 2016 at 20:14
Can you show how you are calling saveSettings (and resetSetitngs) functions? — musically_ut
– musically_ut, Commented Mar 25, 2016 at 20:14

Muhammad Ahsan Ayaz · Accepted Answer · 2016-03-25 20:19:24Z

1

It is a really bad practice to store user credentials in localStorage.. But I got a JSBIN working for your requirements and it works.. Do scroll to bottom for the JS code as I included the library on top of JS

PS: Ignore the js errors and warnings. Those are from the angular-local-storage library

answered Mar 25, 2016 at 20:19

Muhammad Ahsan Ayaz

1,95510 silver badges14 bronze badges

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

5 Comments

user3646958 Over a year ago

Thanks a lot. It works. But why? I can't understand. I added a form tag with ng-submit and changed the button to submit-type. Problem was still there, but after adding ng-controller="SettingsCtrl" it works. But I thought, it is already set in the module?

Muhammad Ahsan Ayaz Over a year ago

You have to put the controller on the DOM (html) element too on which the controller would apply as ng-controller="MyCtrl". That defines the Scope of the controller actually. Without it, the functions and the models won't automatically apply. So you have to do both: 1) apply the controller on html 2) define the controller as appModule.controller

user3646958 Over a year ago

But why works <input ng-model="test"> and {{test}} without applying the controller on html? Sorry for my questions.

Muhammad Ahsan Ayaz Over a year ago

If you don't initiate a controller, angular uses the $rootScope for your application. And if you don't define a model in a controller or at $rootScope, angular creates that model (test in your case) automatically. So using a model isn't an issue but you can't use a function that you didn't define and angular doesn't define functions :) You have to have a controller and the function definition for that. PS: I'm good with giving answers as long as you Up-Vote them :) lol.. jk

Muhammad Ahsan Ayaz Over a year ago

By the way do check the initial examples out at angularjs.org . I hope that'll make things much clearer to you :)

Collectives™ on Stack Overflow

How to save data in localStorage with AngularJS?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related