通過Angular.js維護會話

我正在使用AngularJS框架開展一個項目。我對使用這個框架相當陌生，在過去，我只使用純JavaScript和jQuery。該項目是一個針對特定市場的網頁設計應用程序。通過Angular.js維護會話

由於用戶在設計時在頁面之間移動，我想維護他們正在進行的所有更改的會話。

現在如果用戶登錄，我們使用數據庫中的數據加載會話。當用戶點擊保存按鈕時，我們用會話數據更新數據庫。有人告訴我，我可以保持與Angular相似的會話。這可能嗎？如果是的話，你可以請我指導一個不關注指令或UI的教程嗎？如果這是不可能的，還有其他可行的選擇嗎？

來源

2013-02-19 Jehanzeb.Malik

這是給你一種片斷：

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-02-19 14:11:02

此會話數據可以存儲在本地存儲中嗎？如果用戶關閉瀏覽器並返回... – 2013-11-12 10:02:46

請記住，本地存儲是跨子域共享的，所以有點不太安全。 – 2013-11-12 10:32:45

所以在你的情況下，如果用戶關閉他的瀏覽器，他是反正註銷？ – 2013-11-12 10:40:03

您將在Angular中使用該服務。服務是您向Angular註冊的功能，並且該功能的作業是返回一個對象，該對象將一直存在，直到瀏覽器關閉/刷新。所以這是一個存儲狀態的好地方，並且可以隨着狀態的變化異步同步服務器的狀態。

來源

2013-02-19 12:42:03

您也可以嘗試讓基於window.sessionStorage或window.localStorage服務，以保持頁面重新加載之間的狀態信息。我在部分由AngularJS製作的Web應用中使用它，並且對於工作流程的某些部分，頁面URL以「舊的方式」更改。即使通過IE8也支持Web存儲。爲了方便，這裏是angular-webstorage。

來源

2013-08-23 14:08:09 gertas

我在另一個項目中使用了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>

來源

2015-08-19 15:11:24 Demodave

通常對於其中涉及的一系列網頁的使用情況，並在最後階段或頁面我們發佈的數據到服務器。在這種情況下，我們需要維護狀態。在下面的片段中，我們維護客戶端的狀態

正如上面的帖子中提到的。會話使用工廠配方創建。

客戶端會話也可以使用值提供程序配方進行維護。

請參閱我的文章的完整細節。 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... 
});

來源

2015-11-24 19:04:37 Yogesh

通過Angular.js維護會話

回答

相關問題