How to put data in session in angular js

Question

On my home screen ,I seacrh some data by calling angular controller(SeacrhController),then I click on a button(Start) on home page,which open another tab.On clicking done button on second tab,that second tab is closed and parent page is refreshed.

I want to have data searched earlier on my parent page.Can anyone please tell,how I can achieve this.How can I maintain session.

I tried Cookies and localStorage ,but could not get things working.Any help pls.

common.js :

var myApp = angular.module('MyApp', []);

myApp.controller('SearchController', function($scope,$http) {
      $scope.clientVO = {};

      $scope.getClientDetail = function(bcidNo) {
          var response=$http.get('/testWeb/rest/clientData/'+ id);

          response.success(function(data) {
                console.log("getActor data: " + angular.toJson(data, false));
                $scope.clientVO = data;
               })

              response.error(function(data, status, headers, config) {
                alert("AJAX failed to get data, status=" + status);
              })

      }
    });

home.html :

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="../javascripts/common/common.js"></script>
</head>
<!--some code -->
<div ng-controller="SearchController">
    <form class="content-left-body">
<div class="client-details">
        <span class="content-right-header">Client Details</span>


            <table>
                        <tr><td>
                            <label>Client ID:</label></td>
                            <td><input type="text" name="id" id="Search"
                                placeholder="Search" ng-model="id" class="search-box"/> 
                            <img alt="Search" src="../images/search_img.png" ng-click= "getClientDetail(id);" style="margin-left:-15% ; margin-top:2.5%">


                            </td>
                            <td>
                        <div ng-show="clientVO.clientName==''"><label style="color:red">ID not found in database.</label></div>
                        </td>
                    </table>
            <div>

<div>
            <table style="width: 100%">
                <tr >
                    <td><label>Client Name:</label></td>
                    <td><span ng-show="!clientVO.clientName">-</span><label ng-bind="clientVO.clientName"></label></td>
                    <td><label>AccNo:</label></td>
                    <td><input type="text" ng-disabled="!clientVO.clientName"></td>
                </tr>
                <tr >
                    <td><label>Contact Name:</label></td>
                    <td><span ng-show="!clientVO.contactName">-</span><label ng-bind="clientVO.contactName"></label></td>
                    <td><label>Validation Level:</label></td>
                    <td>
                        <select ng-disabled="!clientVO.clientName">
                            <option value="">-Please Select-</option>
                            <option value="">Level 1</option>
                            <option value="">Level 2</option>
                            <option value="">Level 3</option>
                            <option value="">Level 4</option>
                        </select>
                    </td>
                </tr>
        </table>
    </div>

    <div class="Data-details">
        <div class="data">
            <div class="content-left-body">
                <span class="content-left-header">Data details</span>
                <span class="content-left-header-small">Data classification</span>                  
                <label id="clientClassification" ></label>  <br><br>
                <button id="btn-yellow"  onClick=window.open("classification.html","fullscreen=yes");>Start</button>
            </div>
        </div>
    </div>  
</form>

<!---some code -->
</html>

JorgeObregon · Accepted Answer · 2016-11-04 15:29:56Z

1

I have this simple service to store data in localStorage (note that localStorage won't work here in SO)

angular.module('app', [])
.controller('AppCtrl', ['StorageSrv', function(StorageSrv){
  StorageSrv.set('user', {first: 'John', last: 'Doe'})
  
  console.log(StorageSrv.get('user'));
}]);

// This service can live in a separate file

  angular.module('app')
  .service('StorageSrv', ['$rootScope', function ($rootScope) {
    var self = this,
    prefix = 'your_prefix',
    ls = window.localStorage;

    self.set = function(key, val){
      var obj = {};
      _.set(obj, key, val);
      ls.setItem(prefix, JSON.stringify(obj));
    };

    self.get = function(keyPath){
      if (!keyPath || !_.size(keyPath))
        return JSON.parse(ls.getItem(prefix));
      else
        return _.get(JSON.parse(ls.getItem(prefix)), keyPath, null);
    };

    self.delete = function(keyPath){
      var key = prefix + '_'+_.trimStart(key, prefix);
      var current = self.get(key);
      _.unset(current, keyPath);
      if (!_.size(current)){
        self.update(key, {})
      }
      else {
        self.update(key, current);
      }
    };
  }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="AppCtrl"></div>

answered Nov 4, 2016 at 15:29

JorgeObregon

3,3701 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaurav Over a year ago

Thanks for your response Jorge,however I could not relate it to my code.Basically what I need is ,to put clientVO in session,so that when user comes bak to Home.html and Home.html is refreshed ,still clientVO data is retained.

Collectives™ on Stack Overflow

How to put data in session in angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related