如何在Angular中刷新頁面后檢索本地存儲值？

Question

我將輸入值放入Web本地存儲中。

但我需要的是，將本地存儲值訪問到ng-model中。

單擊“提交”按鈕后，要在表行中追加本地存儲值。

我試過但它沒有發生。

請參考以下代碼。

 var helloApp = angular.module("helloApp", ["ngStorage"]); helloApp.controller("CompanyCtrl", function($scope, $localStorage) { $scope.companies = [{ 'name': 'Xerago Technologies', 'employees': 125000, 'headoffice': 'Bangalore' }, { 'name': 'Cognizant Technologies', 'employees': 100000, 'headoffice': 'Bangalore' }, { 'name': 'Wipro', 'employees': 115000, 'headoffice': 'Bangalore' }, { 'name': 'Tata Consultancy Services (TCS)', 'employees': 150000, 'headoffice': 'Bangalore' }, { 'name': 'HCL Technologies', 'employees': 90000, 'headoffice': 'Noida' }, ]; $scope.addRow = function() { $scope.message = { 'name': $scope.name, 'employees': $scope.employees, 'headoffice': $scope.headoffice }; $scope.companies.push($localStorage.message); console.log($localStorage.message); }; }); 

 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script> <div ng-app="helloApp" ng-controller="CompanyCtrl"> <table class="table"> <tr> <th>Name </th> <th>Employees </th> <th>Head Office </th> </tr> <tr ng-repeat="company in companies"> <td>{{company.name}} </td> <td>{{company.employees}} </td> <td>{{company.headoffice}} </td> </tr> </table> <form class="form-horizontal" role="form" ng-submit="addRow()"> <div class="form-group"> <label class="col-md-2 control-label">Name</label> <div class="col-md-4"> <input type="text" class="form-control" name="name" ng-model="name" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Employees</label> <div class="col-md-4"> <input type="text" class="form-control" name="employees" ng-model="employees" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Headoffice</label> <div class="col-md-4"> <input type="text" class="form-control" name="headoffice" ng-model="headoffice" /> </div> </div> <div class="form-group"> <div style="padding-left:110px"> <input type="submit" value="Submit" class="btn btn-primary" /> </div> </div> </form> </div> 

現在我可以在表中推送輸入值，也可以在本地存儲中使用。

但是當我刷新頁面時，最后更新的數據會隱藏。 我想我需要知道如何獲得。

請幫忙。

Answer 1

試試這個：因為本地存儲在這里不起作用，所以你需要從外面的demo鏈接檢查：所以試試這個鏈接： DEMO

  var helloApp = angular.module("helloApp", []); helloApp.controller("CompanyCtrl", function($scope, $window) { $scope.companies = JSON.parse($window.localStorage.getItem('compnyData')); console.log($scope.companies); $scope.addRow = function() { $scope.message = { 'name': $scope.name, 'employees': $scope.employees, 'headoffice': $scope.headoffice }; $scope.name = ''; $scope.employees = ''; $scope.headoffice = ''; var tempCompanies = []; var tempData = JSON.parse($window.localStorage.getItem('compnyData')); console.log(tempData); if (tempData != null) { console.log('not null'); tempData.push($scope.message); $window.localStorage.setItem('compnyData', JSON.stringify(tempData)); $scope.companies = tempData; } else { $window.localStorage.setItem('compnyData', JSON.stringify([$scope.message])); $scope.companies = [$scope.message]; } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <div ng-app="helloApp" ng-controller="CompanyCtrl"> <table class="table"> <tr> <th>Name </th> <th>Employees </th> <th>Head Office </th> </tr> <tr ng-repeat="company in companies"> <td>{{company.name}} </td> <td>{{company.employees}} </td> <td>{{company.headoffice}} </td> </tr> </table> <div class="form-group"> <label class="col-md-2 control-label">Name</label> <div class="col-md-4"> <input type="text" class="form-control" name="name" ng-model="name" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Employees</label> <div class="col-md-4"> <input type="text" class="form-control" name="employees" ng-model="employees" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Headoffice</label> <div class="col-md-4"> <input type="text" class="form-control" name="headoffice" ng-model="headoffice" /> </div> </div> <div class="form-group"> <div style="padding-left:110px"> <input type="button" ng-click="addRow()" value="Submit" class="btn btn-primary" /> </div> </div> </div> 

Answer 2

您需要使用set和get屬性進行localstorage來保存和檢索數據。

將新數據分配給消息

 $scope.message = {'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice};

在localstorage中設置數據.....

localStorage.setItem("newData",$scope.message);

獲取點擊數據.....

localStorage.getItem("newData");