如何在AngularJs中存储和读取会话(值)?

时间:2015-12-07 09:18:48

标签: javascript angularjs session

我在商店遇到问题并使用Angularjs读取会话数据。 单击按钮后,emp_name应存储在session中,以及如何从session读取存储的emp_name。

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>
&#13;
&#13;
&#13;

我已使用angularjs在点击时使用emp_name创建了提醒。我希望在按钮单击时,emp_name应该存储在session中,而session测试目的是在页面的某处读取会话的emp_name数据。

真诚感谢任何和所有帮助/建议。 感谢。

3 个答案:

答案 0 :(得分:8)

您的会话存储代码可能使用Javascript API进行会话存储。您必须序列化Javascript对象,因为会话存储仅支持字符串。

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

或者,您可以将emp的每个属性存储在单独的存储密钥中。调试应该像

一样简单

sessionStorage.getItem("emp-key")

有关会话存储的更多信息,请点击此处。 https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

同时结帐ngStorage https://github.com/gsklee/ngStorage

答案 1 :(得分:3)

AngularJS应用程序是无状态的,所以没有真正的会话。但是,您可以使用本地存储伪造会话行为。这是ngStorage, 您可以使用AngularJS模块为会话建模。

通常,您创建一个服务来访问本地存储中包含的数据,然后在需要访问会话数据时注入服务。

最佳!

答案 2 :(得分:0)

HTTP会话存储在服务器端,AngularJS在客户端工作。如果要从Angular应用程序访问HTTP会话,则需要在服务器端实现服务,然后使用httpService从Angular调用它。