Session 通过Angular.js维护会话_Session_Angularjs

Session 通过Angular.js维护会话

session angularjs

Session 通过Angular.js维护会话,session,angularjs,Session,Angularjs,我正在使用AngularJS框架进行一个项目。我对使用这个框架相当陌生；在过去，我只使用纯JavaScript和jQuery。该项目是一种针对利基市场的网页设计师应用程序当用户在设计时在页面之间移动时，我希望维护一个包含他们所做的所有更改的会话现在，如果用户登录，我们将使用数据库中的数据加载会话。当用户单击save按钮时，我们用会话数据更新数据库。有人告诉我，我可以用类似于主干的方式维持会话。这可能吗？如果是，你能告诉我一个不关注指令或用户界面的教程吗？如果这是不可能的，还有其他可行的选择吗

我正在使用AngularJS框架进行一个项目。我对使用这个框架相当陌生；在过去，我只使用纯JavaScript和jQuery。该项目是一种针对利基市场的网页设计师应用程序

当用户在设计时在页面之间移动时，我希望维护一个包含他们所做的所有更改的会话

现在，如果用户登录，我们将使用数据库中的数据加载会话。当用户单击save按钮时，我们用会话数据更新数据库。有人告诉我，我可以用类似于主干的方式维持会话。这可能吗？如果是，你能告诉我一个不关注指令或用户界面的教程吗？如果这是不可能的，还有其他可行的选择吗？

您将在Angular中使用该服务。服务是您向Angular注册的函数，该函数的任务是返回一个对象，该对象将一直存在，直到浏览器关闭/刷新。因此，它是一个很好的存储状态的地方，并在状态发生变化时与服务器异步同步该状态。

这里有一个代码片段供您使用：

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示例，说明如何使用：

您还可以尝试基于

window.sessionStorage

或

window.localStorage

进行服务，以在页面重新加载之间保留状态信息。我在web应用程序中使用它，该应用程序部分由AngularJS制作，页面URL在工作流的某些部分以“旧方式”更改。甚至IE8也支持Web存储。这里是为了方便。

因为答案不再适用于更稳定版本的angular，所以我发布了一个新的解决方案

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-to-get会话
如果你想让它成为post，当你在浏览器中打开页面时，页面不可见，你可以，我只是在简化它
将工厂添加到控制器
我之所以使用rootScope，是因为它是我在所有代码中使用的会话变量

HTML

在html中，您可以引用会话

<html ng-app="StarterApp">

<body ng-controller="AppCtrl">
{{ session.variable }}
</body>


{{session.variable}}

通常用于涉及一系列页面的用例，在最后阶段或页面中，我们将数据发布到服务器。在这种情况下，我们需要维护状态。在下面的代码片段中，我们在客户端维护状态

如上文所述。会话是使用出厂配方创建的

客户端会话也可以使用值提供程序配方进行维护

请参考我的帖子了解完整的细节。

让我们举一个购物车的例子，我们需要在不同的页面/angularjs控制器中维护它

在典型的购物车中，我们在各种产品/类别页面上购买产品，并不断更新购物车。以下是步骤

在这里，我们使用“值提供者配方”创建一个内部有购物车的定制可注入服务

我在另一个项目中使用了localStorage。我必须说，我觉得这很有帮助。我很高兴我们有了一个可行的饼干替代品。它速度快，有足够的存储空间，不像cookie那样慢，因为我们必须从文件中读取cookie，并且每个cookie的数据量非常有限。另一个优点是本地存储数据不能跨域使用。因此，没有其他域可以读取您的数据，也不会与变量名发生冲突。我发现的唯一问题是，我们无法指定任何到期日期。我希望它们在将来的更新中包含。@Jehanzeb.Malik web storage使您能够定义自己的过期范围。只需添加一个带有时间戳的键值，并实现您自己的逻辑来覆盖数据，或者只需

window.localStorage.clear（）

即可擦除所有内容。这就是重点。我们必须为web存储中的某些内容创建过期逻辑。只有当我们的代码（网页）在浏览器上运行时，我们的逻辑才会运行，在此期间，编码的调度程序决定过期并删除数据。我开发的大多数web应用程序都要求数据过期。“如果”大多数为web开发的整体应用程序都需要一种功能，而不是浏览器应该实现和标准化的功能。这些小东西为开发人员节省了很多时间。这个会话数据可以存储在本地存储器中吗？如果用户关闭浏览器并返回…请记住，本地存储是跨子域共享的，所以有一点不太安全。因此，在您的情况下，如果用户关闭浏览器，他无论如何都已注销？是否可以使用SessionStore？缺点是它不能在打开的窗口之间共享。。。但对SPA来说没关系。@ValentynShybanov我很确定本地存储不会在域之间共享，即使是子域。转到-打开控制台并添加

window.localStorage.setItem（'shared'，'yes'）

然后转到，打开控制台并添加

window.localStorage.getItem（'shared'）

null

localStorage不是共享的，不能没有一些技巧。

'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...
});