Skip to content Skip to sidebar Skip to footer

How To Get The Local Storage Data Into The View File Using Angular Js

Hello I am beginner in mean Stack. and I have data in localstorage and I want to fetch the data from the local storage and show in html file but I don't know How to get it. on the

Solution 1:

You can use core concept without ngStorage.... https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

localStorage.setItem("userData", $scope.Data);

$scope.storageData = localStorage.getItem("userData");
<p>{{storageData.email}}</p>

Solution 2:

How to get the localStoragedata anywhere this is very simple we have to pass localStorage data into the controller global variable suppose

we have the data into localstorage

$scope.useredit = function (d) {

    var user_id = d._id;
    var dataToModify;

    angular.forEach($scope.dp, function (value, key) {
        if (user_id == value._id) {
            dataToModify = value;
            $localStorage.userData = dataToModify;
            console.log($localStorage.userData.name);
            $location.path('/useredit');
        }
    });

}

we have to define pass $localStorage.userData into the other variable after controller start.

app.controller("usercontroller",function($scope,$http, $localStorage,$location){

            $scope.registeruser = $localStorage.userData;

 $scope.useredit = function (d) {

        var user_id = d._id;
        var dataToModify;

        angular.forEach($scope.dp, function (value, key) {
            if (user_id == value._id) {
                dataToModify = value;
                $localStorage.userData = dataToModify;
                console.log($localStorage.userData.name);
                $location.path('/useredit');
            }
        });

    }

});

Solution 3:

For better understanding click this DEMO

In the controller you need to inject "ngStorage" angular.module('MyApp', ["ngStorage"]). And add the dependency script link <script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>

HTML

<html ng-app="MyApp">

<head>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div  ng-controller="MyController">
        <input type="button" value = "Save" ng-click = "Save()" />
        <input type="button" value = "Get" ng-click = "Get()" />
    </div>
</body>
</html>

Script.js

var app = angular.module('MyApp', ["ngStorage"])
        app.controller('MyController', function ($scope, $localStorage, $sessionStorage, $window) {
            $scope.Save = function () {
                $localStorage.email = "xyz@gmail.com";
            }
            $scope.Get = function () {
                $window.alert($localStorage.email);
            }
        });

Hope it will be usefull for you.


Post a Comment for "How To Get The Local Storage Data Into The View File Using Angular Js"