Question

<!Doctype html>
<html>
<head>
    
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.js"></script>

</head>
 <body ng-app="myApp">
<div ng-controller="myCtrl" class="container jumbotron">
    <div class="form-group">
        <input type="text" class="form-control" ng-model="empName" placeholder="Please Enter Employee Name"/>
    </div>
    <div class="form-group">
            <input type="text" class="form-control" ng-model="empUserId" placeholder="Please Enter Employee UserName"/>
        </div>
        <div class="form-group">
                <input type="text" class="form-control" ng-model="empEmailId" placeholder="Please Enter Employee Email ID"/>
            </div>
            <div class="form-group">
                    <button class="btn btn-info" ng-click="saveData();">Save</button>
                </div>
                <div class="form-group">
                        <button class="btn btn-info" ng-click="loadData();">Load</button>
                    </div>
                    <hr/>
                    Employee Name : {{empData.empname}}<br/><br/>
                    Employee User ID : {{empData.empuserid}}<br/><br/>
                    Employee Email ID : {{empData.emailid}}
</div>
<script>
var app = angular.module("myApp", ['ngStorage']);
app.controller("myCtrl", function($scope, $localStorage){
    $scope.saveData = function(){
        var empData = {empname:$scope.empName,
                       empuserid: $scope.empUserId,
                       emailid : $scope.empEmailId
                       }
        //$localStorage.name = $scope.empName;
        //$localStorage.userid = $scope.empUserId;
        //$localStorage.emailid = $scope.empEmailId;
        $localStorage.empData = empData;
        //window.localStorage.set("empData", JSON.stringify(empData));
         
    }
    $scope.loadData = function(){
        //$scope.name1 = $localStorage.name;
        //$scope.userid2 = $localStorage.userid;
        //$scope.emailid3 = $localStorage.emailid;
       $scope.empData = $localStorage.empData;
       //$scope.empData = JSON.parse(window.localStoage.get('empData'));
         
    }
    $scope.loadData();
});
</script>
 </body>
</html>

Answer 1

只需在控制器底部调用$ scope.loadData（）即可获取数据。

Answer 2

尝试以下步骤：

第1步：在app.controller中编写一个init（）函数并设置ng-model值。

$scope.init = function () {
        $scope.empName = $localStorage.empData.empname;
        $scope.empUserId = $localStorage.empData.empuserid;
        $scope.empEmailId = $localStorage.empData.emailid;

        $scope.empData = $localStorage.empData;
    }

第2步：使用ng-init调用HTML中的init（）函数。

<div ng-controller="myCtrl" class="container jumbotron" ng-init="init()">

刷新后如何保留数据？

2 个答案: