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 view file.

$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');
        }
    });

}

when I type localStorage; into console it show

ngStorage-userData
:
"{
   "_id":"5846692617e0575c0e0c2211",
   "password":123456,
   "email":"montyy1981@gmail.com",
   "name":"digvijay12","__v":0
}"

How to get it value into the view file.I used like

<div>{{userData.email}}</div>

But it is not showing data.please help me how to fetch localstorage data and show into view file.

回答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>

回答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');
            }
        });

    }

});

回答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.

来源：https://stackoverflow.com/questions/41241835/how-to-get-the-local-storage-data-into-the-view-file-using-angular-js

标签

javascript

angularjs

html5

mean-stack