通过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

此会话数据可以存储在本地存储中吗？如果用户关闭浏览器并返回... – 2013-11-12 10:02:46

请记住，本地存储是跨子域共享的，所以有点不太安全。 – 2013-11-12 10:32:45

所以在你的情况下，如果用户关闭他的浏览器，他是反正注销？ – 2013-11-12 10:40:03

答

您将在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... 
});

通过Angular.js维护会话

相关推荐