Как добавить локальное хранилище в угловое?

Я сделал стол с угловым, все отлично работает сейчас. Теперь я хотел бы добавить функцию локального хранения. Я действительно пытался достичь этого, но я пришел к выводу, что сейчас я не делаю, что делать. Я пробовал использовать gsklee/ngStorage и библиотека gregory/angular-local-storage, но у меня возникла проблема с ее реализацией в моем текущем коде.Как добавить локальное хранилище в угловое?

Может кто-нибудь взглянуть? Спасибо за ваше время.

script.js

(function() { 
"use strict"; 

var table = angular.module('myTable', ['angularUtils.directives.dirPagination','ngStorage']); 

table.filter('startFrom', function() { 
    return function(input, start) { 
     if(input) { 
      start = +start; 
     return input.slice(start); 
     } 
     return []; 
    } 
}); 

    table.controller('TodoCtrl', function($scope, $http, $localStorage) { 
    $http.get('todos.json').then(function(res) { 
     $scope.todos = res.data; 
    }); 

    $scope.currentPage = 1; 
    $scope.entryLimit = 5; 

    $scope.sort = function (keyname) { 
     $scope.sortKey = keyname; 
     $scope.reverse = !$scope.reverse; 
    }; 

    $scope.DeveloperDelete = function (id){ 
     var result = confirm('Are you sure?'); 
     if (result === true) { 
      var index = getSelectedIndex(id); 
      $scope.todos.splice(index, 1); 
     }; 
    }; 

    function getSelectedIndex(id){ 
     for(var i = 0; i < $scope.todos.length; i++) 
      if($scope.todos[i].id == id) 
       return i; 
      return -1; 
    }; 

    $scope.addDeveloperRow = function(){   
     $scope.todos.push({ 'id':$scope.id, 'text': $scope.text, 'color':$scope.color, "progress:":$scope.progress}); 
     $scope.id=''; 
     $scope.text=''; 
     $scope.color=''; 
     $scope.progress=''; 
    }; 

}); 


})();

index.html

<!doctype html> 
<html ng-app="myTable" > 
<head> 
<link rel="stylesheet" type="text/css" href="css/main.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="script.js"></script> 
<script src="dirPagination.js"></script> 
<script src="ngStorage.js"></script> 

</head> 

<body ng-controller="TodoCtrl"> 

<div class="container"> 
    <div class="col-lg-12"> 
     <div> 
     <h1 class="centered">My todo list</h1> 
     </div> 

     <div class="col-lg-3"> 
     <h4>Search</h4> 
     <form> 
      <div class="form-group"> 
      <div class="input-group"> 
       <div class="input-group-addon"><i class="fa fa-search"></i></div> 
       <input type="text" class="form-control" ng-model="test"> 
      </div>  
      </div> 
     </form> 
     </div> 

     <div class="col-lg-3"> 
     <h4>Show number of records</h4> 
     <form> 
      <div class="form-group"> 
      <div class="input-group"> 
       <div class="input-group-addon"><i class="fa fa-search" ></i></div> 
       <select ng-model="entryLimit" class="form-control"> 
       <option>5</option> 
       <option>10</option> 
       <option>20</option> 
       <option>50</option> 
       </select> 
      </div>  
      </div> 
     </form> 
     </div> 

     <div class="col-lg-3"> 
     <h4>Show custom table</h4> 
      <form> 
      <div class="form-group"> 
       <div class="input-group">  
       <div class="input-group-addon"><i class="fa fa-search" ></i></div> 
        <select class="form-control "> 
        <option class="btn-sm ng-scope" ng-click="removeId = !removeId" > Hide Id field</option> 
        <option class="btn-sm ng-scope" ng-click="removeText = !removeText" >Hide Text field</option> 
        <option class="btn-sm ng-scope" ng-click="removeColor = !removeColor" >Hide Color field</option> 
        <option class="btn-sm ng-scope" ng-click="removeProgress = !removeProgress" >Hide Progress field</option>    
        </select> 
       </div>  
      </div> 
      </form> 
     </div> 

     <div class="col-lg-3"> 
     <br><br> 
     <form> 
      <div class="form-group"> 
      <div class="input-group"> 
       <button type="button" class="btn btn-default btn-block " ng-click="addDeveloperRow()">Add a new record</button> 
      </div>  
      </div> 
     </form> 
     </div> 


     <br> 
     <table class="table table-striped" st-table="data"> 
      <thead> 
      <th ng-click="sort('id')" ng-hide="removeId" st-sort="id">Id 
       <span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span> 
      </th> 
      <th ng-click="sort('text')" ng-hide="removeText" st-sort="text">Text 
       <span class="glyphicon sort-icon" ng-show="sortKey=='text'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span> 
      </th> 
      <th ng-click="sort('color')" ng-hide="removeColor" st-sort="color"> Color 
       <span class="glyphicon sort-icon" ng-show="sortKey=='color'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span> 
      </th> 
      <th ng-click="sort('progress')" ng-hide="removeProgress" st-sort="progress">Progress 
       <span class="glyphicon sort-icon" ng-show="sortKey=='color'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span> 
      </th> 
      <th>CRUD</th> 
      </thead> 
      <tbody> 
      <tr dir-paginate="todo in todos |orderBy:sortKey:reverse|filter:test| startFrom:(currentPage-1)*entryLimit | itemsPerPage:entryLimit "> 
       <td ng-hide="removeId"> 
       <div ng-hide="todo.editing">{{ todo.id }} </div> 

       <div ng-show="todo.editing"><input type="id" ng-model="todo.id" /></div> 
       </td> 

       <td ng-hide="removeText">     
       <div ng-hide="todo.editing">{{ todo.text }}</div> 
       <div ng-show="todo.editing"><input type="text" ng-model="todo.text" /></div> 
       </td> 
       <td ng-hide="removeColor" style="color:{{todo.color}}" > 
       <div ng-hide="todo.editing">{{todo.color}}</div> 
       <div ng-show="todo.editing"><input type="text" ng-model="todo.color" /></div> 
       </td> 
       <td ng-hide="removeProgress"> 
       <div ng-hide="todo.editing">{{todo.progress}}% </div> 
       <div ng-show="todo.editing"><input type="text" ng-model="todo.progress" /></div> 
       </td> 
       <td> 
       <button class="btn btn-danger btn-sm ng-scope" ng-click="DeveloperDelete(todo.id)"><span class="glyphicon glyphicon-trash"></span></button> 
       <button class="btn btn-warning btn-sm ng-scope" ng-click="todo.editing = !todo.editing"><span class="glyphicon glyphicon-pencil"></span></button> 
       </td> 
      </tr> 
      </tbody> 
     </table> 

    <div class="centeredPag"> 
     <dir-pagination-controls 
     max-size="5" 
     direction-links="true" 
     boundary-links="true" > 
     </dir-pagination-controls> 
    </div> 



    </div> 
</div> 

</body> 
</html>

источник

2015-12-14 John Onslaught

Зачем вам нужен модуль, чтобы помочь вам взаимодействовать с LocalStorage? Вы можете напрямую использовать [свой javascript API] (https://developer.mozilla.org/en-US/docs/Web/API/Storage). – Aaron

Можете ли вы показать мне мой пример Аарона? Только одно поле. Спасибо за ваш ответ! –

На самом деле вы не используете службу хранения для хранения ваших данных. Простое внедрение службы на самом деле не будет использовать localStorage для данных. –

Посмотрите на эту реализацию я сделал для работы с локальным хранилищем. Это действительно просто и на самом деле не нуждается в сторонней библиотеке.

(function() { 
    'use strict'; 
    angular.module('myApp') 
     .service('LocalStorageService', [ 
      '$window', function($window) { 
       var service = { 
        store: store, 
        retrieve: retrieve, 
        clear: clear, 
        clearAll: clearAll 
       }; 

       return service; 

       function store(key, value) { 
        $window.localStorage.setItem(key, angular.toJson(value, false)); 
       } 

       function retrieve(key) { 
        return $window.localStorage.getItem(key); 
        // return angular.fromJson($window.localStorage.getItem(key)); 
        // I'm not 100% sure, but I think I need to de-serialize the json that was stored 
       } 

       function clear(key) { 
        $window.localStorage.removeItem(key); 
       } 


       function clearAll() { 
        $window.localStorage.clear(); 
       } 


      } 
     ]); 
})();

Если вы хотите использовать его, вам просто нужно ввести его внутрь своего контроллера и начать использовать его.

например:

table.controller('TodoCtrl', function($scope, $http, LocalStorageService) { 
    $scope.todos = LocalStorageService.retrieve('todos'); 
    if (!$scope.todos){ // if 'todos' was not previously stored, $scope.todos will be null 
     $http.get('todos.json').then(function(res) { 
      $scope.todos = res.data; 
      LocalStorageService.store('todos', $scope.todos); 
     }); 
    } 

}

источник

2015-12-14 16:17:48

Благодарим вас за ответ Deblaton Jean-Philippe. У меня все еще есть проблема с реализацией этого кода. Я был бы очень признателен, если бы вы могли реализовать это для моего плунжера. Я действительно пробовал. Я понимаю логику, но она не работает. Огромное спасибо! –

@ Josh Я обновил свой ответ. –

Как добавить локальное хранилище в угловое?

ответ

Смежные вопросы