How to store and read session (value) in AngularJs?

Question

I am having trouble in store and read sessioned data with Angularjs . After click on button emp_name should store in session and also how can i read stored emp_name from session .

Sample in plnkr

// Code goes here

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

app.controller('Ctrl', function($scope) {
  $scope.employee = [{
      emp_id: 1,
      emp_name: 'Jes',
      emp_cont:9876543445
    }, {
      emp_id: 2,
      emp_name: 'Sandy',
      emp_cont:3553454345
    }, {
      emp_id: 3,
      emp_name: 'Alex',
      emp_cont:9343434345
    }, {
      emp_id: 4,
      emp_name: 'Nancy',
      emp_cont:9876543445
    }, {
      emp_id: 5,
      emp_name: 'Scott',
      emp_cont:9834564455
    }
  ];
  
          $scope.returnRefId = function (emp) {           
            try {
                  //  test emp
                  alert(emp);
                  // session code here
                  
            }
            catch (e) {
                  alert("some errror");
            }
        };
});

ul li{list-style:none;float:left;padding:10px;border:1px solid #ddd;height:20px;width:100px}
ul{clear:both}
label{color:red}

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="Ctrl">
  <ul ng-repeat="employees in employee | filter:customFilter">
    <li>{{employees.emp_id}} </li>
    <li>{{employees.emp_name}} </li>
    <li>{{employees.emp_cont}} </li>
    <li><button   ng-click="returnRefId(employees.emp_name);" >Add Session</button></li>    
  </ul>
  <br /><br /><br />
  <label id="read_ses">How to store and read emp_name thru only session</label>
</body>

</html>

I have created alert with emp_name on click by using angularjs. I want that on button click emp_name should store in session and for sessiontesting purpose read sessioned emp_name data somewhere on page.

Any and all help/advice is sincerely appreciated. Thanks.

Omkar Khair · Accepted Answer · 2015-12-07 09:34:54Z

10

Your session storage code could look something like this using Javascript APIs for session storage. You will have to serialize your Javascript object as session storage only supports strings.

$scope.returnRefId = function (emp) {           
        try {
              //  test emp
              alert(emp);
              // session code here
              sessionStorage.setItem("emp-key", JSON.stringify(emp));
        }
        catch (e) {
              alert("some errror");
        }
 };

Alternatively, you can storage each property of emp in a separate storage key. Debugging should be as simple as

sessionStorage.getItem("emp-key")

More information on session storage can be found here. https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

Also checkout ngStorage https://github.com/gsklee/ngStorage

answered Dec 7, 2015 at 9:34

Omkar Khair

1,3842 gold badges18 silver badges40 bronze badges

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

4 Comments

Rakesh Over a year ago

Hello Omkar. I tried this but retun "null" .....

$scope.returnRefId = function (emp) {                try {       //  test emp      // alert(emp);       // session code here       sessionStorage.setItem("emp-key", JSON.stringify(emp));       }       catch (e) {         alert("some errror");       }       var data = sessionStorage.getItem('key');       alert(data);    };

Omkar Khair Over a year ago

The getItem method key should be the same as it was for setItem. In your case emp-key.

Omkar Khair Over a year ago

It should be var data = sessionStorage.getItem('emp-key'); .

Rakesh Over a year ago

thank you very much Omkar... this is what i was trying to do. thanks again.

Maurizio Vacca · Accepted Answer · 2015-12-07 09:31:54Z

3

AngularJS applications are stateless, so there's no really a session. However, you can fake the session behaviour using the local storage. Here's the ngStorage, a AngularJS module you can use to model you session.

In general, you create a service to access data contained in the local storage and then you inject the service whenever you need to access the session data.

Best!

answered Dec 7, 2015 at 9:31

Maurizio Vacca

1531 silver badge11 bronze badges

2 Comments

Rakesh Over a year ago

same thing can be done by javascript , jquery, c# or any other scripting??

Maurizio Vacca Over a year ago

@Rakesh - since localStorage is HTML5 standard, yes. You can access it using pure javascript or through a framework like jQuery or AngularJS. I'd suggest to use modules or plugins to manage it, since they generally provide some useful interface to avoid serialize/deserialize operation (considering that localStorage stores Objects as String). About C#, it's generally executed server side so no, you cannot access the localStorage directly (but you can implement the logic to keep client and server data on sync). Best!

Michał Kolenda · Accepted Answer · 2015-12-07 09:45:19Z

0

HTTP session is stored in server side and AngularJS works on client's side. If you want to access the HTTP session from Angular application, you will need to implement a service on server side ant then call it from Angular using httpService.

answered Dec 7, 2015 at 9:45

Michał Kolenda

1731 silver badge11 bronze badges

Collectives™ on Stack Overflow

How to store and read session (value) in AngularJs?

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related