AngularJS : utiliser le stockage local

Je veux sauvegarder mes données web dans le local de stockage. J'ai un tableau dans lequel j'ai ajouter des données, il fonctionne avec AngularJS. Je voudrais que les données à enregistrer, comment dois-je faire ?

le code :
le code html :

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AppCtrl" >
<button type="button" class="btn btn-default" ng-click="openR()"> add user </button>
<button type="button" class="btn btn-default" ng-click="openC()"> connect </button>
<div class="btn btn-success" ng-show="User.connected">{{User.username}} is connected</div>
<table>
<thead>
<th class="col-lg-3">Username</th>
<th class="col-lg-3">Password</th>
<th class="col-lg-3">First name</th>
<th class="col-lg-3">Last name</th>
</thead>
<tbody>
<tr ng-repeat="User in Users.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
<td class="col-lg-3">{{User.userN}}</td>
<td class="col-lg-3">{{User.PassW}}</td>
<td class="col-lg-3">{{User.Name}}</td>
<td class="col-lg-3">{{User.LastName}}</td>
</tr>
</tbody>
</table>
<div>
<pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"></pagination>
</div>
</div>
<script type="text/ng-template" id="table.html">
<form ng-submit="okR()">
<div class="modal-header" >
<h3>users</h3>
</div>
<div class="modal-body">
<div class="panel-body">
<div class="form-group">
<label>Username :</label>
<input type="text" placeholder="Ariel73" ng-model="userN">
</div>
<div class="form-group">
<label>Password :</label>
<input type="text" placeholder="Aa123456" ng-model="PassW">
</div>
<div class="form-group">
<label>First name :</label>
<input type="text" placeholder="Ariel" ng-model="Name">
</div>
<div class="form-group">
<label>Last name :</label>
<input type="text" placeholder="Livshits" ng-model="LastName">
</div>
</div>
<div class="modal-footer">
<button type="submit"  class="btn btn-success">Submit</button>
</div>
</div>
</form>
</script>
<script type="text/ng-template" id="connect.html">
<form ng-submit="okC()">
<div class="modal-header" >
<h3>users</h3>
</div>
<div class="modal-body">
<div class="panel-body">
<div class="form-group">
<label>Username :</label>
<input type="text" placeholder="Ariel73" ng-model="username">
</div>
<div class="form-group">
<label>Password :</label>
<input type="text" placeholder="Aa123456" ng-model="password">
</div>
</div>
<div class="modal-footer">
<button type="submit"  class="btn btn-success">Submit</button>
</div>
</div>
</form>
</script>
</body>
</html>

l'angle de code de l'application : 

app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('AppCtrl', function($scope, $modal, $log ) {
$scope.Users = [{
'userN': 'Ariel1',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel2',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel3',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel4',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel5',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel6',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel6',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel6',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}];
$scope.User = {
'username': '',
'Password': '',
'connected': false
};
$scope.viewby = 3;
$scope.totalItems = $scope.Users.length;
$scope.currentPage = 4;
$scope.itemsPerPage = $scope.viewby;
$scope.maxSize = (($scope.Users.length / 3) + 1) ; //Number of pager buttons to show
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function(num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first paghe
};
$scope.openR = function() {
var modalInstance = $modal.open({
templateUrl: 'table.html',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(newUser) {
$scope.Users.push(newUser);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.openC = function() {
var modalInstance = $modal.open({
templateUrl: 'connect.html',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(conUser) {
$scope.User = conUser;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
//Please note that $modalInstance represents a modal window (instance) dependency.
//It is not the same as the $modal service used above.
app.controller('ModalInstanceCtrl', function($scope, $modalInstance) {
$scope.okR = function() {
$modalInstance.close({
'userN': $scope.userN,
'PassW': $scope.PassW,
'Name': $scope.Name,
'LastName': $scope.LastName
});
};
$scope.okC = function() {
$modalInstance.close({
'username': $scope.username,
'Password': $scope.password,
'connected': true
});
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
Je n'ai qu'une idée de base des locaux de stockage et de l'apprentissage. Mais, vous pouvez trouver le concept dans cette réponse, stackoverflow.com/questions/18247130/... j'Espère qu'il vous aide à vous 🙂

OriginalL'auteur Ariel Livshits | 2015-09-09

  1. 12

    AngularJS Service:
    À l'aide de la fenêtre.localStorage directement est très bien, mais d'avoir à définir et analyser les Chaînes devient ennuyeux après un certain temps. Utilisez ce simple AngularJS service pour l'installation et la récupération des chaînes ou des objets facilement:

    angular.module('ionic.utils', [])
.factory('$localstorage', ['$window', function($window) {
return {
set: function(key, value) {
$window.localStorage[key] = value;
},
get: function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
setObject: function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
},
getObject: function(key) {
return JSON.parse($window.localStorage[key] || '{}');
}
}
}]);

    Et à utiliser ce service, il suffit d'injecter de l' $localstorage de service dans un contrôleur ou d'exécuter la fonction:

    angular.module('app', ['ionic', 'ionic.utils'])
.run(function($localstorage) {
$localstorage.set('name', 'Max');
console.log($localstorage.get('name'));
$localstorage.setObject('post', {
name: 'Thoughts',
text: 'Today was a good day'
});
var post = $localstorage.getObject('post');
console.log(post);
});
    Ici est légèrement améliorée variante. codepen lien
    Cela semble bon, mais un) est-il une chance de polluer l'espace de noms global? et b) est-il une taille limite à combien vous pouvez stocker?

    OriginalL'auteur Ariel Livshits

  2. 0

    Au lieu de ng-model="username", ng-model="PassW" etc modale, utilisez ceci: ng-model="newUser.userN", ng-model="newUser.PassW".

    Puis créer une méthode comme ceci: 

    $scope.saveNewUser = function(newUser) { window.localStorage.setItem("newUser", JSON.stringify(newUser)}

    Et de modifier l'action soumettre à cette fonction.

    Et si vous souhaitez enregistrer les données de la table à localstorage:

    $scope.saveUsers = function() {window.localStorage.setItem("tableData", JSON.stringify($scope.Users));}
    cette fonction est avec une erreur de syntaxe
    pouvez-vous me dire où écrire la ligne: la fenêtre.localstorage.setItem("tableData", JSON.stringify($champ d'application.Les utilisateurs)); car il me donne l'erreur: TypeError: Cannot read property 'setItem' undefined
    Il a donné une erreur parce que j'ai utilisé localstorage au lieu de localStorage.
    après je l'enregistrer, comment puis-je obtenir les données de la localStroge ? Je veux que mon tableau pour être sauvé et être en mesure de récupérer des données après l'actualisation de
    Vous pouvez obtenir les données à l'aide de la fenêtre.localStorage.getItem("tableData"). Mais parce que vous stringified d'abord, vous pouvez l'analyser d'abord comme ceci: $champ d'application.Utilisateurs = JSON.parse(fenêtre.localStorage.getItem("tableData"));

    OriginalL'auteur Ronald

  3. 0

    En plus de l'utilisation et de l'ajout de localstorage comme un depedency, vous pouvez tout simplement aller avec l'injection de $window dépendance quelle que soit la commande que vous voulez obtenir de stockage local, et il n'a pas besoin d'installer quoi que ce soit, vous allez juste comme ça

    Pour le réglage, vous pouvez aller comme 

    window.localStorage.setItem('key', 'value' );

    Pour se faire, vous pouvez aller comme 

    window.localStorage.getItem('key');

    Et si tu veux afficher la valeur, il vous suffit de l'envelopper dans un champ d'application et à l'engager dans une page html, comme ceci

    $scope.displayThis = window.localStorage.getItem('key');

    Et puis vous pouvez l'afficher dans votre représentation html de votre contrôleur comme ceci:

    <span>{{displayThis}}</span>

    OriginalL'auteur Marko