How to access cookies in AngularJS

Question

What s the AngularJS way to access cookies   I ve seen references to both a service and a module for cookies  but no examples     Is there  or is there not an AngularJS canonical approach

User · Answer

http   docs angularjs org api ngCookies  cookieStore  Make sure you include http   code angularjs org 1 0 0rc10 angular-cookies-1 0 0rc10 js to use it

User · Answer

The original accepted answer mentions jquery cookie plugin  A few months ago though  it was renamed to js-cookie and the jQuery dependency removed  One of the reasons was just to make it easy to integrate with other frameworks  like Angular   Now  if you want to integrate js-cookie with angular  it is as easy as something like   module factory   cookies   function       return Cookies noConflict          And that s it  No jQuery  No ngCookies     You can also create custom instances to handle specific server-side cookies that are written differently  Take for example PHP  that convert the spaces  in the server-side to a plus sign   instead of also percent-encode it   module factory   phpCookies   function       return Cookies      noConflict        withConverter function  value  name           return value                Decode all characters according to the  encodeURIComponent  spec              replace     0-9A-Z  2    g  decodeURIComponent                 Decode the plus sign to spaces              replace     g                     The usage for a custom Provider would be something like this   module service   customDataStore      phpCookies   function  phpCookies       this storeData   function  data         phpCookies set   data   data           this containsStoredData   function         return phpCookies get   data                I hope this helps anyone   See detailed info in this issue  https   github com js-cookie js-cookie issues 103  For detailed docs on how to integrate with server-side  see here  https   github com js-cookie js-cookie blob master SERVER SIDE md

User · Answer

Angular deprecated  cookieStore in version 1 4 x  so use  cookies instead if you are using latest version of angular  Syntax remain same for  cookieStore  amp   cookies      cookies put  key    value     var value    cookies get  key      See the Docs for an API overview  Mind also that the cookie service has been enhanced with some new important features like setting expiration  see this answer  and domain  see CookiesProvider Docs    Note that  in version 1 3 x or below   cookies has a different syntax than above     cookies key    value   var value    cookies value     Also if you are using bower  make sure to type your package name correctly    bower install angular-cookies X Y Z    where X Y Z is the AngularJS version you are running   There s another package in bower  angular-cookie  without the  s   which is not the official angular package

User · Answer

FYI  I put together a JSFiddle of this using the  cookieStore  two controllers  a  rootScope  and AngularjS 1 0 6  It s on JSFifddle as http   jsfiddle net krimple 9dSb2  as a base if you re messing around with this     The gist of it is   Javascript  var myApp   angular module  myApp     ngCookies      myApp controller  CookieCtrl   function   scope   rootScope   cookieStore         scope bump   function              var lastVal    cookieStore get  lastValue            if   lastVal                 rootScope lastVal   1            else                rootScope lastVal   lastVal   1                     cookieStore put  lastValue    rootScope lastVal              myApp controller  ShowerCtrl   function            HTML   lt div ng-app  myApp  gt       lt div id  lastVal  ng-controller  ShowerCtrl  gt    lastVal    lt  div gt       lt div id  button-holder  ng-controller  CookieCtrl  gt           lt button ng-click  bump    gt Bump  lt  button gt       lt  div gt   lt  div gt

User · Answer

Add angular cookie lib   angular-cookies js  You can use  cookies or  cookieStore parameter to the respective controller  Main controller add this inject  ngCookies    angular module  myApp     ngCookies       Use Cookies in your controller like this way    app controller  checkoutCtrl   function   scope   rootScope   http   state   cookies        store cookies    cookies putObject  final total price    rootScope fn pro per      Get cookies    cookies getObject  final total price

User · Answer

Here s a simple example using  cookies  After clicking on button  the cookie is saved  and then restored after page is reloaded   app html    lt html ng-app  app  gt   lt head gt       lt meta charset  utf-8    gt       lt script src    ajax googleapis com ajax libs angularjs 1 6 3 angular js  gt  lt  script gt       lt script src  http   ajax googleapis com ajax libs angularjs 1 6 3 angular-cookies js  gt  lt  script gt       lt script src  app js  gt  lt  script gt   lt  head gt   lt body ng-controller  appController as vm  gt        lt input type  text  ng-model  vm food  placeholder  Enter food    gt        lt p gt My favorite food is   vm food    lt  p gt        lt p gt Open new window  then press Back button  lt  p gt       lt button ng-click  vm openUrl    gt Open lt  button gt   lt  body gt   lt  html gt    app js    function           use strict        angular module  app     ngCookies         controller  appController      cookies     window   function   cookies   window            var vm   this             get cookie         vm food    cookies get  myFavorite             vm openUrl   function                    save cookie              cookies put  myFavorite   vm food                window open  http   www google com     self

User · Answer

AngularJS provides ngCookies module and  cookieStore service to use Browser Cookies   We need to add angular-cookies min js file to use cookie feature   Here is some method of AngularJS Cookie    get key      This method returns the value of given cookie key  getObject key     This method returns the deserialized value of given cookie key  getAll      This method returns a key value object with all the cookies  put key  value   options      This method sets a value for given cookie key  remove key   options      This method remove given cookie    Example   Html   lt  DOCTYPE html gt   lt html ng-app  myApp  gt   lt head gt   lt script src    ajax googleapis com ajax libs angularjs 1 3 0-beta 1 angular min js  gt  lt  script gt   lt script src    ajax googleapis com ajax libs angularjs 1 3 0-beta 1 angular-cookies min js  gt  lt  script gt   lt  head gt   lt body ng-controller  MyController  gt    cookiesUserName   loves   cookietechnology     lt  body gt   lt  html gt    JavaScript  var myApp   angular module  myApp     ngCookies     myApp controller  MyController      scope     cookies     cookieStore     window   function  scope   cookies   cookieStore   window     cookies userName    Max Joe    scope cookiesUserName    cookies userName   cookieStore put  technology    Web     scope cookietechnology    cookieStore get  technology           I have Taken reference from http   www tutsway com simple-example-of-cookie-in-angular-js php

User · Answer

This is how you can set and get cookie values  This is what I was originally looking for when I found this question   Note we use  cookieStore instead of  cookies   lt  DOCTYPE html gt   lt html ng-app  myApp  gt   lt head gt     lt script src  http   code angularjs org 1 0 0rc10 angular-1 0 0rc10 js  gt  lt  script gt     lt script src  http   code angularjs org 1 0 0rc10 angular-cookies-1 0 0rc10 js  gt  lt  script gt     lt script gt      angular module  myApp     ngCookies         function CookieCtrl  scope   cookieStore           scope lastVal    cookieStore get  tab            scope changeTab   function tabName              scope lastVal   tabName             cookieStore put  tab   tabName                     lt  script gt   lt  head gt   lt body ng-controller  CookieCtrl  gt       lt  --     -- gt   lt  body gt   lt  html gt

User · Answer

This answer has been updated to reflect latest stable angularjs version  One important note is that  cookieStore is a thin wrapper surrounding  cookies  They are pretty much the same in that they only work with session cookies  Although  this answers the original question  there are other solutions you may wish to consider such as using localstorage  or jquery cookie plugin  which would give you more fine-grained control and do serverside cookies  Of course doing so in angularjs means you probably would want to wrap them in a service and use  scope apply to notify angular of changes to models  in some cases    One other note and that is that there is a slight difference between the two when pulling data out depending on if you used  cookie to store value or  cookieStore  Of course  you d really want to use one or the other   In addition to adding reference to the js file you need to inject ngCookies into your app definition such as    angular module  myApp     ngCookies       you should then be good to go   Here is a functional minimal example  where I show that cookieStore is a thin wrapper around cookies    lt  DOCTYPE html gt   lt html ng-app  myApp  gt   lt head gt      lt link rel  stylesheet  type  text css  href    maxcdn bootstrapcdn com bootstrap 3 2 0 css bootstrap min css  gt   lt  head gt   lt body ng-controller  MyController  gt      lt h3 gt Cookies lt  h3 gt     lt pre gt   usingCookies json   lt  pre gt     lt h3 gt Cookie Store lt  h3 gt     lt pre gt   usingCookieStore json   lt  pre gt      lt script src    ajax googleapis com ajax libs angularjs 1 2 19 angular js  gt  lt  script gt     lt script src    ajax googleapis com ajax libs angularjs 1 2 19 angular-cookies js  gt  lt  script gt     lt script gt      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              lt  script gt    lt  body gt   lt  html gt    The steps are    include angular js include angular-cookies js inject ngCookies into your app module  and make sure you reference that module in the ng-app attribute  add a  cookies or  cookieStore parameter to the controller access the cookie as a member variable using the dot     operator -- OR -- access cookieStore using put get methods

[angularjs] How to access cookies in AngularJS?

Examples related to angularjs

Examples related to angular-cookies