AngularJS $cookies are not persisting
Solution 1
In Angular v1.4 you can finally set some options for the cookies. Here's a very simple example:
var now = new $window.Date(),
// this will set the expiration to 6 months
exp = new $window.Date(now.getFullYear(), now.getMonth()+6, now.getDate());
$cookies.put('yourCookie','blabla',{
expires: exp
});
var cookie = $cookies.get('yourCookie');
console.log(cookie); // logs 'blabla'
If you check your cookies after running this code you will see that the expiration will be properly set to the cookie named yourCookie
.
The object passed as a third param to the put
function above allows for other options as well, such as setting path
, domain
and secure
. Check the docs for an overview.
Solution 2
For a cookie to be persistent over browser sessions, the expiration date should be set. Unfortunately, this does not seem to be supported with the angularjs $cookie service. See this post: AngularJS - How to set expiration date for cookie in AngularJS
Solution 3
So it appears to be the expiration causing the issue. As of AngularJS 1.2.19, you are not able to set the expiration date through $cookie
or $cookieStore
.
To remedy this, I used local storage instead. I used this module to give easy access to local storage: https://github.com/grevory/angular-local-storage
It was pretty painless to change. I changed $cookieStore.get('remember');
to localStorageService.get('remember');
so as you can see they share method names. Instead of put
, it's add
Ronnie
Updated on August 25, 2022Comments
-
Ronnie over 1 year
I have a login form with a remember username function. All they do is check the box and the cookie is saved via:
$scope.toggleCookie = function() { //-- $scope.remember is the model for the checkbox $cookieStore.put('remember', $scope.remember); if (!$scope.remember) $cookieStore.remove('email'); }
When the user returns to the login page, first I check the
remember
cookie:$scope.remember = ($cookieStore.get('remember') == null || $cookieStore.get('remember') == false) ? false : true;
Then I check if there is a value in the
email
cookie:$scope.email = ($cookieStore.get('email') != null) ? $cookieStore.get('email') : '';
Now all the above is working fine, I can login with it checked, logout and I can see my username in the input field. If I uncheck it, login and logout, the username is gone.
I can also see this happening in the resources->cookies tab in the chrome dev tools.
I can refresh the page and still, the username is there when checked.
My issue is that when I CLOSE chrome, reopen it, all the cookie data is gone. Why is this? I don't have much experience with cookies to begin with.
-
Ronnie almost 10 yearsI saw that thread after I posted this and figured that had something to do with it. I came across a directive someone made that allowed you to set the expiration. I was hoping this still wasn't the case.
-
Ronnie almost 10 yearsI think I might just use
localStorage
for this