繁体   English   中英

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

[英]How to get the Local Storage data into the view file Using Angular js

你好,我是平均堆栈的初学者。 我在localstorage中有数据,我想从本地存储中获取数据并在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数据并显示到视图文件中。

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

如何在任何地方获取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');
            }
        });

    }

});

为了更好地理解,请单击此演示

在控制器中,您需要注入“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);
            }
        });

希望它对你有用。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM