Cookies in AngularJS

Я делаю SPA, при успешном входе в систему я устанавливаю cookies(username,userid,etc.), содержащие информацию о пользователе, получаемую из api.Cookies in AngularJS

установить печенье с помощью PHP:

setcookie("NAME",$records['userinfo']['name'],time()+(20 * 365 * 24 * 60 * 60));

получить его с помощью JavaScript:

function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0; i<ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1); 
     if (c.indexOf(name) == 0) return c.substring(name.length,c.length); 
    } 
    return ""; 
}

Пытаться показать в контроллере:

angular.module('App', []) 

    .controller('UserProfileCtrl', function($scope) { 
    function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0; i<ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1); 
     if (c.indexOf(name) == 0) return c.substring(name.length,c.length); 
    } 
    return ""; 
} 
$scope.username = getCookie('NAME'); 
    })

index.html:

<html data-ng-app="App" data-ng-controller="AppCtrl"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="css/app.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> 
    <script src="js/app.js"></script> 
    </head> 
    <body data-ng-class="{'skip-animations':disabled}" class="ng-cloak"> 
     <div class="list-group" data-ng-controller="UserProfileCtrl"> 
     <p>Welcome</p> 
     <div class="username">{{username}}</div> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 user"> 
     <div class="user-bg-image"> 
     <img src="images/user-bg.png"> 
     <div class="user-img"><img src="{{userimage}}"> 
     </div> 
     </div> 
     </div> 
     <ul class="user-profile clearfix"> 
     <a href="#123"><li>Edit Profile</li></a> 
     <a href="#123" onclick="logout()"><li>Logout</li></a> 
     </ul> 
     </div> 
    </body> 
</html>

Он отлично работает с перегрузкой в app.On перезагрузки мы можем получить данные куки (username).

Проблема:

Как мы можем получить эти куки без перезагрузки приложения.

Любая помощь будет оценена по достоинству. Спасибо

источник

2015-05-12 Rohit Jindal

Просто вызовите метод восстановления файлов cookie всякий раз, когда захотите .. –

@pankajparkar, он отлично работает с перезагрузкой страницы, где я хочу показать данные cookie. Но проблема в том, что я хочу показывать данные на одной странице без перезагрузки. –

@pankajparkar, Итак, у вас есть идея, как я могу это сделать с помощью углового. Я использую угловое решение для того, чтобы сделать SPA.so доступ к файлам cookie без перезагрузки страницы, –

Вы должны использовать ngCookies, является лучшим способом, а в случае, если вы хотите сохранять эту информацию в любой части DOM, используйте $cookieStore

в любом случае, здесь различия

$cookieStore

Предоставляет хранилище данных ключа (string-object), которое поддерживается файлами сеансов. Объекты, помещенные или извлеченные из этого хранилища, автоматически сериализуются или десериализуются угловым toJson/fromJson.

$cookies

Обеспечивает чтения/записи в куки браузера.

Usage, расставание с @Dan Doyon answer

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
</head> 
<body ng-controller="MyController"> 

    <h3>Cookies</h3> 
    <pre>{{usingCookies|json}}</pre> 
    <h3>Cookie Store</h3> 
    <pre>{{usingCookieStore|json}}</pre> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script> 
    <script> 
    angular.module('myApp', ['ngCookies']); 
    app.controller('MyController',['$scope','$cookies','$cookieStore', 
         function($scope,$cookies,$cookieStore) { 
     var someSessionObj = { 'innerObj' : 'somesessioncookievalue'}; 

    $cookies.dotobject = someSessionObj; 
    $scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') }; 

    $cookieStore.put('obj', someSessionObj); 
    $scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, }; 
    } 
    </script> 

</body> 
</html>

и запомнить

angular.module('myApp', ['ngCookies']);

UPDATE

как на @ lucky7id комментарии, он прав, $cookieStore устарела , поэтому просто продолжайте использовать $cookies, который почти такой же.

источник

2015-05-12 18:42:10 TheUnnamed

'$ cookieStore' устарел:/ – lucky7id

Я думаю, что его' $ cookies' теперь https://docs.angularjs.org/api/ngCookies/service/$cookies –

@ lucky7id В настоящее время я использую '' '$ cookieStore'' 'в мобильном приложении, которое я разрабатываю. – TheUnnamed

Я бы предложил использовать ngCookies, он выполняет большую часть этой работы для вас, включая сеансовые куки.

Кроме того, при успешном входе в систему вы можете просто написать cookie в JS, в своем обратном вызове.

источник

2015-05-12 18:34:15 lucky7id

Я делаю то же самое, что и предлагаю you.cookie is write в JS отлично, но как показать его на одной странице, используя угловые. –

Служба '$ cookies' имеет методы' get() 'и' getObject() ', вы просто передаете ключ, который вы сохранили в файле cookie, соответствующему методу. https://docs.angularjs.org/api/ngCookies/service/$cookies – lucky7id

Я прошел, но как я могу показать его пользователю без обновления приложения. –

Cookies in AngularJS

ответ

Смежные вопросы