javascript - How to get the Local Storage data into the view file Using Angular js - Stack Overflow

admin管理员组

文章数量:1415145

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":"[email protected]",
   "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.

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":"[email protected]",
   "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.

• javascript
• angularjs
• html
• mean-stack

Share Improve this question Follow edited Dec 20, 2016 at 13:28 Nitheesh 20k33 gold badges2727 silver badges5151 bronze badges asked Dec 20, 2016 at 11:58 Shahzad IntersoftShahzad Intersoft 77222 gold badges1616 silver badges3838 bronze badges 4

• Using local storage isn't hard at all, very straightforward in fact. See this article. I actually used this on a project not so long ago (an angular project) and the examples in this article are pretty much exactly what I needed. w3schools./HTML/html5_webstorage.asp Local storage isn't an Angular thing. It's an HTML5/browser thing. – Tim Consolazio Commented Dec 20, 2016 at 12:03
• I want to show local storage data into view file using MEAN Stack – Shahzad Intersoft Commented Dec 20, 2016 at 12:17
• can u show your view page ? – Balan Commented Dec 20, 2016 at 12:19
• Not sure what the MEAN stack has to do with it? MEAN uses Angular, Angular uses JS, LocalStorage is accessible through JS...? – Tim Consolazio Commented Dec 20, 2016 at 12:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

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

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

    }

});

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/ngstorage/0.3.6/ngStorage.min.js"></script>

HTML

<html ng-app="MyApp">

<head>
   <script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="https://cdn.jsdelivr/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 = "[email protected]";
            }
            $scope.Get = function () {
                $window.alert($localStorage.email);
            }
        });

Hope it will be usefull for you.

本文标签： javascriptHow to get the Local Storage data into the view file Using Angular jsStack Overflow