如何在 Angular js 中存储和检索数据？答案

【问题标题】：how to store and retrieve data in angular js?如何在 Angular js 中存储和检索数据？
【发布时间】：2014-09-25 12:00:19
【问题描述】：

你能告诉我如何永久存储数据（例如本地存储）和检索数据。我想存储数据以便再次获取。我正在做客户端编程？我谷歌它说有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='';
        }

    }
    );

谢谢

【问题讨论】：

Angular 与否，原理是一样的：diveintohtml5.info/storage.html
@Shomz 感谢更新 ..你能检查我的 plunker 吗？只添加一个条目。剩下的我想我会自己做的。我只想添加它添加到数据库中
您使用的是什么类型的数据库？
我正在使用客户端语言、jquery、angular.js、HTML5 制作桌面应用程序
我只需要添加、删除、编辑条目需要哪种类型的 dB 角度支持

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

【解决方案1】：

您可以在此处获取 angular-local-storage：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);
  }

}]);

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

【讨论】：

谢谢...你使用 localstorage ..我不想使用它。我想创建表
在该表中，我将给出列名："id" ,"name","classname"
哦，在这种情况下，您必须在网络服务器中设置端点，这样您就可以使用 $http 服务来发布和获取数据。网络服务器负责将数据存储在数据库中，Angular 本身无法做到这一点。
我们不能创建表..但是有人告诉我使用 websql 可能是我们可以创建.or sqlite
嗯，我对 WebSql 没有完全的了解，但是通过快速研究我发现它也使用 localstorage，而且它似乎已停产：csimms.botonomy.com/2011/05/…

【解决方案2】：

通常你有很多选择来保持数据的持久性和存储它，我知道的那些：

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 来存储、删除、检索数据:)

【讨论】：

【解决方案3】：

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

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

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

【讨论】：