how to store and retrieve data in angular js?

Question

can you please tell me how to store data permantly (example local storage)and retrieve data .I want to store data so that I get again .I am doing client side programing ? I google it it say there is persistance.js will do that ..can we use that ?I am try to make a simple example to store data but not able to that .I want to save list of name of student and class. here is my plunker : 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='';
        }

    }
    );

thanks

Answer 1

You need a database. Web-storage is only for temporary things.

If you have a backend, you can use a service and $http to create a CRUD application.

You use Angular to send data to the backend which does the persistence.

Answer 2

you can grab angular-local-storage here: https://github.com/grevory/angular-local-storage

That makes it easy to use the browser localstorage, I've updated your plunker with an example of use: 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);
  }

}]);

Keep in mind that this does not persist your data across the web, if you want to do that, you should setup a webserver from which you can post and get the data. Hope that helps.

Answer 3

Usually you have many choices to keep data persistent and to store it, here those that i know:

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)

Obviously some of these features are not always suppoerted, check here the one you preferr to support or not caniuse.com

Just choose the one that fits your needs and create a dataFactory to store, delete, retrieve data :)