如何在角度js中存储和检索数据?

时间:2014-08-02 11:27:29

标签: jquery node.js angularjs angularjs-directive angular-ui

请告诉我如何永久存储数据(例如本地存储)并检索数据。我想存储数据以便我再次访问。我正在进行客户端编程?我谷歌它说它有persistance.js会这样做..我们可以使用它吗?我试着做一个简单的例子来存储数据但不能那样。我想保存学生和班级名单。 这是我的傻瓜:http://plnkr.co/edit/cLTIJfETGYENQyEdsu94?p=preview

 // Code goes here
    var app = angular.module('appstart', ['ngRoute']);

    app.config(function($routeProvider) {
      //  $locationProvider.html5Mode(true);
      $routeProvider
        .when('/home', {
          templateUrl: 'tem.html',
          controller: 'ctrl'
        })


      .otherwise({
        redirectTo: '/home'
      });
    });

    app.controller("ctrl", function($scope) {

      $scope.students = [];

      $scope.add = function() {

        $scope.students.push({
          inputName : angular.copy($scope.inputName),
          inputclass : angular.copy($scope.inputclass)
        });

        $scope.inputclass='';
        $scope.inputName='';
        }

    }
    );

感谢

3 个答案:

答案 0 :(得分:0)

您可以在此处抓取角度本地存储空间:https://github.com/grevory/angular-local-storage

这样可以轻松使用浏览器本地存储,我使用了一个使用示例更新了您的plunker:http://plnkr.co/edit/W06UnVysGx0FMVnITMZD

app.controller("ctrl", ['$scope','localStorageService', function($scope, localStorageService) {

  $scope.students = [];

  $scope.add = function() {

    $scope.students.push({
      inputName : angular.copy($scope.inputName),
      inputclass : angular.copy($scope.inputclass)
    });

    $scope.inputclass='';
    $scope.inputName='';
  }

  $scope.loadFromStorage = function(){
    $scope.students = localStorageService.get('studentsList');
    if($scope.students == null)
      $scope.students = [];
  }

  $scope.saveToStorage = function(){
    localStorageService.set('studentsList', $scope.students);
  }

}]);

请注意,这不会在网络上保留您的数据,如果您想这样做,您应该设置一个网络服务器,您可以从中发布和获取数据。 希望有所帮助。

答案 1 :(得分:0)

通常你有很多选择来保持数据的持久性并存储它,在这里我知道:

1 - localStorage or sessionStorage or IndexedDB

2 - cookie if your data is < 4kb (cookie max size)

3 - server side (mysql, redis, mongo and noSQL,json or other extension files etc)

4 - client side (json file or whatever file format you want/can develop)

显然,其中一些功能并不总是被支持,请在此处查看您更喜欢支持的功能caniuse.com

只需选择适合您需求的产品并创建一个dataFactory来存储,删除和检索数据:)

答案 2 :(得分:0)

您需要一个数据库。网络存储仅用于临时事物。

如果您有后端,则可以使用服务和$http来创建CRUD应用程序。

使用Angular将数据发送到执行持久性的后端。