如何在 AngularJs 中存储和读取会话（值）？答案

【问题标题】：How to store and read session (value) in AngularJs?如何在 AngularJs 中存储和读取会话（值）？
【发布时间】：2016-03-11 20:24:06
【问题描述】：

我在使用 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>

我使用angularjs 创建了点击时带有emp_name 的警报。我希望在按钮上单击 emp_name 应存储在 session 中，并出于 sessiontesting 的目的读取页面某处的会话 emp_name 数据。

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

【问题讨论】：

标签： javascript angularjs session

【解决方案1】：

使用 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

【讨论】：

你好奥姆卡。我试过了，但返回“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); };
getItem 方法键应该与 setItem 的键相同。在你的情况下emp-key.
应该是var data = sessionStorage.getItem('emp-key'); 。
非常感谢 Omkar...这就是我想要做的。再次感谢。

【解决方案2】：

AngularJS 应用程序是无状态的，因此没有真正的会话。但是，您可以使用本地存储来伪造会话行为。这是ngStorage，一个 AngularJS 模块，你可以用来为你的会话建模。

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

最好的！

【讨论】：

同样的事情可以通过 javascript , jquery, c# 或任何其他脚本来完成？？
@Rakesh - 因为localStorage 是 HTML5 标准，是的。您可以使用纯 JavaScript 或通过 jQuery 或 AngularJS 等框架访问它。我建议使用模块或插件来管理它，因为它们通常提供一些有用的接口来避免序列化/反序列化操作（考虑到 localStorage 将Objects 存储为String）。关于 C#，它通常在服务器端执行，所以不，您不能直接访问 localStorage（但您可以实现保持客户端和服务器数据同步的逻辑）。最好的！

【解决方案3】：

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

【讨论】：