2015-12-07 20 views
6

Angularjsでセッションデータの保存と読み取りに問題があります。 ボタンemp_nameをクリックすると、sessionに格納されます。また、格納されたemp_nameをどのようにしてsessionから読み取ることができますか。AngularJsにセッション(値)を保存して読み込む方法は?

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="[email protected]*" 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に保存し、sessionのテスト目的のために、ページ上のどこかのemp_nameデータを読み込むことを望みます。

すべてのヘルプとアドバイスは心から感謝しています。おかげさまで

答えて

6

セッション保存コードは、セッション保存用に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

+0

こんにちはOmkar。私はこれを試しましたが、 "ヌル" ..... $スコープを返します。returnRefId = function(emp){ { //テストemp //アラート(emp); //ここにセッションコード sessionStorage.setItem( "emp-key"、JSON.stringify(emp)); } catch(e){ alert( "some errror"); } var data = sessionStorage.getItem( 'key'); アラート(データ)。 }; ' – Rakesh

+0

getItemメソッドのキーは、setItemのキーと同じにする必要があります。あなたのケースでは 'emp-key'です。 –

+0

これは 'var data = sessionStorage.getItem( 'emp-key')でなければなりません。 '。 –

3

AngularJSアプリケーションはステートレスなので、実際にはセッションはありません。ただし、ローカルストレージを使用してセッション動作を偽装できます。 ngStorage, あなたのセッションをモデル化するために使用できるAngularJSモジュールがあります。

通常、ローカルストレージに格納されているデータにアクセスするサービスを作成し、セッションデータにアクセスする必要があるときはいつでもサービスを注入します。

ベスト!

+0

同じことは、javascript、jquery、C#または他のスクリプトによって行うことができますか? – Rakesh

+0

貴重なアドバイスありがとうございました。Maurizio Vacca – Rakesh

+0

@Rakesh - 'localStorage'はHTML5標準ですので、はい。純粋なjavascriptを使用するか、jQueryやAngularJSのようなフレームワークを使用してアクセスできます。 (localStorageが 'Objects'を' String'として格納することを考慮して)直列化/逆直列化操作を回避するための有用なインタフェースを提供するので、モジュールやプラグインを使用して管理することをお勧めします。 C#については、一般的にサーバー側で実行されるため、ローカルと直接アクセスすることはできません(ただし、クライアントとサーバーのデータを同期させるロジックを実装できます)。 ベスト! –

0

HTTPセッションはサーバー側に保存され、AngularJSは、クライアント側で動作します。 AngularアプリケーションからHTTPセッションにアクセスするには、サーバーサイドのAntにサービスを実装し、httpServiceを使用してAngularから呼び出す必要があります。

+0

貴重なアドバイスをいただきありがとうございます。Michal Kolenda – Rakesh

関連する問題