2015-12-07 27 views
6

Tôi gặp sự cố khi lưu trữ và đọc dữ liệu được phiên với Angularjs. Sau khi bấm vào nút emp_name nên lưu trữ trong session và cũng làm thế nào tôi có thể đọc được lưu trữ emp_name từ session.Làm thế nào để lưu trữ và đọc phiên (giá trị) trong 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>

Tôi đã tạo ra cảnh báo với emp_name trên nhấp chuột bằng cách sử dụng angularjs. Tôi muốn rằng trên nút bấm emp_name nên lưu trữ trong session và cho session mục đích thử nghiệm đọc dữ liệu emp_name phiên một nơi nào đó trên trang.

Bất kỳ và tất cả trợ giúp/lời khuyên đều được đánh giá cao. Cảm ơn.

Trả lời

6

Mã bộ nhớ phiên của bạn có thể trông giống như thế này bằng cách sử dụng API Javascript để lưu trữ phiên. Bạn sẽ phải tuần tự hóa đối tượng Javascript của bạn vì lưu trữ phiên chỉ hỗ trợ chuỗi.

$scope.returnRefId = function (emp) {   
     try { 
       // test emp 
       alert(emp); 
       // session code here 
       sessionStorage.setItem("emp-key", JSON.stringify(emp)); 
     } 
     catch (e) { 
       alert("some errror"); 
     } 
}; 

Hoặc, bạn có thể lưu trữ mỗi thuộc tính emp trong khóa lưu trữ riêng biệt. Gỡ lỗi nên càng đơn giản càng

sessionStorage.getItem("emp-key")

Thông tin thêm về lưu trữ phiên có thể được tìm thấy ở đây. https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

Cũng kiểm ngStorage https://github.com/gsklee/ngStorage

+0

Xin chào Omkar. Tôi đã thử này nhưng retun "null" ..... 'phạm vi.returnRefId = function (emp) { thử { // test emp // alert (emp); // mã phiên tại đây sessionStorage.setItem ("khóa-chính", JSON.stringify (emp)); } bắt (e) { cảnh báo ("một số lỗi lầm"); } var data = sessionStorage.getItem ('key'); cảnh báo (dữ liệu); }; ' – Rakesh

+0

Khoá phương thức getItem phải giống như phương thức setItem. Trong trường hợp của bạn là "chìa khóa". –

+0

Nó phải là 'var data = sessionStorage.getItem ('emp-key'); '. –

3

Ứng dụng AngularJS là không trạng thái, vì vậy không có phiên thực sự. Tuy nhiên, bạn có thể giả mạo hành vi phiên sử dụng bộ nhớ cục bộ. Đây là mô-đun AngularJS ngStorage, mà bạn có thể sử dụng để tạo mô hình cho phiên của mình.

Nói chung, bạn tạo một dịch vụ để truy cập dữ liệu có trong bộ nhớ cục bộ và sau đó bạn bơm dịch vụ bất cứ khi nào bạn cần truy cập dữ liệu phiên.

Tốt nhất!

+0

điều tương tự có thể được thực hiện bằng javascript, jquery, C# hoặc bất kỳ tập lệnh nào khác ?? – Rakesh

+0

cảm ơn lời khuyên quý giá của bạn Maurizio Vacca – Rakesh

+0

@Rakesh - vì 'localStorage' là chuẩn HTML5, vâng. Bạn có thể truy cập nó bằng javascript tinh khiết hoặc thông qua một khung công tác như jQuery hoặc AngularJS. Tôi khuyên bạn nên sử dụng các mô-đun hoặc plugin để quản lý nó, vì chúng thường cung cấp một số giao diện hữu ích để tránh hoạt động serialize/deserialize (xem lưu trữ localStorage 'Objects' là' String'). Về C#, nó thường được thực hiện phía máy chủ để không, bạn không thể truy cập trực tiếp localStorage (nhưng bạn có thể thực hiện logic để giữ cho dữ liệu máy khách và máy chủ đồng bộ). Tốt nhất! –

0

phiên HTTP được lưu trữ ở phía máy chủ và AngularJS hoạt động trên mặt của khách hàng. Nếu bạn muốn truy cập phiên HTTP từ ứng dụng Angular, bạn sẽ cần phải thực hiện một dịch vụ trên ant phía máy chủ sau đó gọi nó từ Angular bằng cách sử dụng httpService.

+0

cảm ơn lời khuyên quý giá của bạn Michal Kolenda – Rakesh

Các vấn đề liên quan