How To Store Information in Cookies in AngularJS

In this article we discuss How To Store Information in Cookies in AngularJS

How To Store Information in Cookies in AngularJS

A cookie is a small piece of data that’s typically sent from a website you may be viewing and stored by your web browser. We can use these cookies for a wide range of things, from storing the last viewed items of a visitor to authentication cookies.

How To Store Information in Cookies in AngularJS

Cookie Limitations

It must be noted that typically you cannot store more than 20 cookies per web server, or more than 4KB of data per cookie.

Specifying max-age is optional and without this the cookie will only last the same amount of time as the browser remains open. If you were to close the browser then the cookie would be lost. However if you specify a max-age then the browser will retain that cookie for the longer. This is typically how sites like Amazon retain your browsing history and can determine what to show you in the recommended items section.

Implementation

component based architecture style, if you are not familiar with components in AngularJS

Conversely you can also just lift the code from the controller and put it into your own existing controllers.

The Necessary Imports

In your angular application, you’ll need to add the following script tag to the HTML page and below your angular.js script tag

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-cookies.min.js"></script>

The version of angular cookies you are importing is the same version of Angular JS that you are using within your application or you may run into issues.

Controller

our controller we’ll have 2 main functions, one to get the cookies on page load and one to set the cookies on button click. We’ll have to ensure that we import $cookies service to our controller

function CookieController($log, $scope, $cookies) {
  var ctrl = this;

  ctrl.$onInit = function() {
    $log.log("Initialized cookie page");
    ctrl.storedCookie = $cookies.get("favourite");
    $log.log(ctrl.storedCookie);
  };

  ctrl.storeCookie = function(cookie) {
    $log.log(cookie);
    $cookies.put("favourite", cookie);
  };
}

CookieController.$inject = ["$log", "$scope", "$cookies"];

angular.module("root").controller("CookieController", CookieController);

HTML

The HTML page will consist of an input field and a button, when we enter a value into the input field and click our Store Cookie button, the ctrl.storeCookie function will be called within our controller which will store whatever is in our input field in a ‘favorite cookie.

<div class="component">
  <div class="header">
    <h2>Cookies Demo</h2>
  </div>
  <div class="content">
    <p>
      Enter what you want to store in your cookie in the input box below and
      click the submit button.
    </p>
    <p>When you refresh the page you should see your cookie below:</p>
    <p>Info Stored in Cookie: <b>{{ $ctrl.storedCookie }}</b></p>
    <div class="form-group">
      <label>Set Cookie</label>
      <input
        class="form-control"
        placeholder="cookie"
        ng-model="$ctrl.cookie"
      />
      <br />
      <button
        class="btn btn-primary"
        ng-click="$ctrl.storeCookie($ctrl.cookie)"
      >
        Store Cookie
      </button>
    </div>
  </div>
</div>

Component

We’ll have a very simple component to tie everything

var cookies = {
  templateUrl: "./app/components/cookies/cookies.html",
  controller: CookieController,
  bindings: {
    storedCookie: "=?",
    cookie: "<"
  }
};

angular.module("root").component("cookies", cookies);

Also Check out AngularJS Filter Search Tutorial

If you interested in the Entertainment genre please check this also thebiographys.com

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *