通过Angular.js维护会话
我正在使用AngularJS框架开展一个项目。我对使用这个框架相当陌生,在过去,我只使用纯JavaScript和jQuery。该项目是一个针对特定市场的网页设计应用程序。通过Angular.js维护会话
由于用户在设计时在页面之间移动,我想维护他们正在进行的所有更改的会话。
现在如果用户登录,我们使用数据库中的数据加载会话。当用户点击保存按钮时,我们用会话数据更新数据库。有人告诉我,我可以保持与Angular相似的会话。这可能吗?如果是的话,你可以请我指导一个不关注指令或UI的教程吗?如果这是不可能的,还有其他可行的选择吗?
这是给你一种片断:
app.factory('Session', function($http) {
var Session = {
data: {},
saveSession: function() { /* save session data to db */ },
updateSession: function() {
/* load data from db */
$http.get('session.json').then(function(r) { return Session.data = r.data;});
}
};
Session.updateSession();
return Session;
});
这里是Plunker例如,你可以如何使用: http://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview
您将在Angular中使用该服务。服务是您向Angular注册的功能,并且该功能的作业是返回一个对象,该对象将一直存在,直到浏览器关闭/刷新。所以这是一个存储状态的好地方,并且可以随着状态的变化异步同步服务器的状态。
您也可以尝试让基于window.sessionStorage
或window.localStorage
服务,以保持页面重新加载之间的状态信息。我在部分由AngularJS制作的Web应用中使用它,并且对于工作流程的某些部分,页面URL以“旧的方式”更改。即使通过IE8也支持Web存储。为了方便,这里是angular-webstorage。
我在另一个项目中使用了localStorage。我必须说我发现它很安静。我很高兴我们有一个可行的替代饼干。它速度快,存储空间充足,不像Cookie那么慢,因为我们必须从文件中读取cookie,每个cookie的数据量非常有限。另一个优点是localStorage数据不可用于跨域。所以没有其他域可以读取您的数据,也不会与变量名冲突。我发现的唯一问题是我们无法指定任何到期。我希望他们确实包括在未来的更新中。 – 2013-08-29 08:24:09
@ Jehanzeb.Malik网络存储让您可以定义自己的到期范围。只需添加一个带时间戳的键值并实现自己的逻辑来覆盖数据,或者只使用'window.localStorage.clear()'擦除所有内容。 – gertas 2013-08-31 23:15:25
这就是要点。我们必须创建一个从Web存储过期的逻辑。我们的逻辑只有在我们的代码(网页)在浏览器上运行时才会运行,并且在此期间编码调度程序决定过期并删除数据。我需要在我开发的大多数网络应用程序中使用数据到期。 “如果”为web开发的大多数整体应用都需要功能,而不是由浏览器实施和标准化。这些小事为开发人员节省了大量时间。 – 2013-09-02 11:02:46
因为答案不再有效的更稳定版本的角度,我发布了一个较新的解决方案。
PHP页面:session.php文件
if (!isset($_SESSION))
{
session_start();
}
$_SESSION['variable'] = "hello world";
$sessions = array();
$sessions['variable'] = $_SESSION['variable'];
header('Content-Type: application/json');
echo json_encode($sessions);
发送回只有你在角希望会话变量,不是所有的人不想暴露比所需要的更多。
JS全都在一起
var app = angular.module('StarterApp', []);
app.controller("AppCtrl", ['$rootScope', 'Session', function($rootScope, Session) {
Session.then(function(response){
$rootScope.session = response;
});
}]);
app.factory('Session', function($http) {
return $http.get('/session.php').then(function(result) {
return result.data;
});
});
- 做一个简单的GET来获得使用工厂会议。
- 如果你想让它发布到使页面不可见的,当你只是去它在浏览器中就可以了,我只是简化它
- 工厂添加到控制器
- 我使用rootScope因为它是我在所有代码中使用的会话变量。
HTML
里面你的HTML,你可以参考你的会话
<html ng-app="StarterApp">
<body ng-controller="AppCtrl">
{{ session.variable }}
</body>
通常对于其中涉及的一系列网页的使用情况,并在最后阶段或页面我们发布的数据到服务器。在这种情况下,我们需要维护状态。在下面的片段中,我们维护客户端的状态
正如上面的帖子中提到的。会话使用工厂配方创建。
客户端会话也可以使用值提供程序配方进行维护。
请参阅我的文章的完整细节。 session-tracking-in-angularjs
让我们以购物车为例,我们需要跨各种页面/ angularjs控制器来维护购物车。
在典型的购物车中,我们在各种产品/类别页面上购买产品并不断更新购物车。以下是步骤。
在这里,我们使用“价值提供者配方”创建具有购物车的自定义注射服务。
'use strict';
function Cart() {
return {
'cartId': '',
'cartItem': []
};
}
// custom service maintains the cart along with its behavior to clear itself , create new , delete Item or update cart
app.value('sessionService', {
cart: new Cart(),
clear: function() {
this.cart = new Cart();
// mechanism to create the cart id
this.cart.cartId = 1;
},
save: function (session) {
this.cart = session.cart;
},
updateCart: function (productId, productQty) {
this.cart.cartItem.push({
'productId': productId,
'productQty': productQty
});
},
//deleteItem and other cart operations function goes here...
});
此会话数据可以存储在本地存储中吗? 如果用户关闭浏览器并返回... – 2013-11-12 10:02:46
请记住,本地存储是跨子域共享的,所以有点不太安全。 – 2013-11-12 10:32:45
所以在你的情况下,如果用户关闭他的浏览器,他是反正注销? – 2013-11-12 10:40:03