AngularJs：在本地存儲中存儲和檢索數據

我對Angular非常陌生。早些時候我使用Javascript，但現在我正在學習AngularJs。當前使用的版本是1.3.2。AngularJs：在本地存儲中存儲和檢索數據

問題是我正在嘗試使用本地存儲。

在Javascript中，我們使用類似於此：

localStorage.pic = data.pic; 
localStorage.id = data.uid; 
localStorage.name = data.name;

有沒有類似這樣的東西在AngularJs？

感謝您的諮詢。

來源

2017-01-15 Ironic

你檢查了我的答案嗎？ –

這是使用ngStorage以同樣的方式，

添加ngStorage參考，並注入它作爲一個depdency你的角度應用，

<script type="text/javascript" src='https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js'></script> 

angular.module('gameApp', ['ngStorage'])

然後你可以像這樣存儲和檢索，

$localStorage.pic= $scope.pic;

DEMO

angular.module('gameApp', ['ngStorage', 'ui.bootstrap']) 
 
    .controller('MainCtrl', ['$scope', '$localStorage', function ($scope, $localStorage) { 
 

 
    // Set a total score variable equal to zero 
 
    $scope.total = 0; 
 

 
    // NOTE: use d3.js for data visualization in widget 
 

 
    var gameData = [ 
 
     { 
 
     "level": "Level One", 
 
     "points": 30, 
 
     "max": 100, 
 
     "completed": false 
 
     }, 
 
     { 
 
     "level": "Level Two", 
 
     "points": 50, 
 
     "max": 100, 
 
     "completed": false 
 
     } 
 
    ]; 
 

 
    // tie the game JSON to the view 
 
    $scope.gameData = gameData; 
 
    
 
    // tie the view to ngModule which saves the JSON to localStorage 
 
    $localStorage.gameData = gameData; 
 

 
    // loop through the gameData and sum all the values where the key = 'points' 
 

 

 

 
    console.log("Your current score is: " + $scope.total) 
 
    $localStorage.total = $scope.total; 
 

 
    $scope.addToLevel = function(level, num){ 
 
     $scope.levelPoints = gameData[level].points += num; 
 
     console.log("You have " + $scope.levelPoints + " points in Level"); 
 
    } 
 

 

 
    // create a function that loops the json to check if the points >= max 
 
     // and if so 
 
     // then change completed to true 
 
    
 
    $scope.calcTotal = function(){ 
 
     for (var i in $scope.gameData){ 
 
      var level = $scope.gameData[i]; 
 
      $scope.total += level.points; 
 
     } 
 
     $localStorage.total = $scope.total; 
 
    }; 
 

 

 
    $scope.calcTotal(); 
 

 

 

 
    }])

<!DOCTYPE html> 
 
<html ng-app='gameApp'> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Angular Local storage</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script> 
 
    <script type="text/javascript" src='https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js'></script> 
 
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script> 
 

 
    <script type="text/javascript" src='script.js'></script> 
 

 

 
</head> 
 

 
<body ng-controller='MainCtrl'> 
 
    <!-- Fixed navbar --> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Angular JS Local Storage</a> 
 
     </div> 
 
    </div> 
 
    
 
    </nav> 
 

 

 
    <div class='container'> 
 
    <div class='row' style='margin-top:100px'> 
 
     <button class='btn btn-primary' ng-click="addToLevel(0, 20); calcTotal();">+20 Points Lvl 1</button> 
 
     <br> 
 

 
     <table class='table table-hover'> 
 
     <thead> 
 
      <tr> 
 
      <td>Level</td> 
 
      <td>Points</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat='data in gameData'> 
 
      <td>{{ data.level }}</td> 
 
      <td>{{ data.points }}</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Total Points</td> 
 
      <td>{{total}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 

 

 
    </div> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

來源

2017-01-15 16:58:37 Sajeetharan

無論您使用angular還是其他框架，JavaScript都會保持不變。您做錯了，localStorage有setItem（）和getItem（）方法。試試這個

localStorage.setItem('pic',data.pic); 
localStorage.setItem('id',data.id); 
localStorage.setItem('name',data.name);

和檢索這樣

localStorage.getItem('pic'); 
localStorage.getItem('id'); 
localStorage.getItem('name');

來源

2017-01-15 16:56:59

您可以創建一個共同的工廠服務，將保存並返回基於密鑰的保存本地存儲的數據。

app.factory('storageService', ['$rootScope', function($rootScope) { 

    return { 
     get: function(key) { 
      return localStorage.getItem(key); 
     }, 
     set: function(key, data) { 
      localStorage.setItem(key, data); 
     } 
    }; 
}]);

在控制器：

注入控制器的storageService依賴設置，並從本地存儲獲取數據。

app.controller('myCtrl',['storageService',function(storageService) { 

    // Set local storage data to storageService 
    storageService.set('key', 'value'); 

    // Get saved local storage data from storageService 
    var data = storageService.get('key'); 

});

來源

2017-01-15 17:18:11

AngularJs：在本地存儲中存儲和檢索數據

回答

相關問題