Question

您好，我是平均Stack的初学者。我在本地存储中有数据，我想从本地存储中获取数据并在html文件中显示，但我不知道如何获取它。在视图文件上。

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

}

当我输入 localStorage; 进入控制台时显示

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

如何将其值放入视图文件中。我使用

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

但它没有显示data.please帮助我如何获取localstorage数据并显示到视图文件中。

Answer 1

您可以在没有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>

Answer 2

如何在任何地方获取localStoragedata这很简单我们必须将localStorage数据传递给控制器全局变量假设

我们将数据存入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');
        }
    });

}

我们必须在控制器启动后将pass $localStorage.userData定义到另一个变量中。

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

    }

});

Answer 3

为了更好地理解，请点击此DEMO

在控制器中，您需要注入“ngStorage”angular.module('MyApp', ["ngStorage"])。并添加依赖项脚本链接<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);
            }
        });

希望它对你有用。

如何将本地存储数据放入视图文件中使用Angular js

3 个答案: