Angularjs cookie Set Cookie Get Cookie Delete Cookie Example

Method of Get, Set and Clear Cookie in AngularJS

How to access cookies in AngularJS?

Methods
get(key);
getObject(key);
getAll();
put(key, value, [options]);
putObject(key, value, [options]);
remove(key, [options]);

Provides read/write access to simple browser’s cookies in AngularJS

There are The Following List Of Cookies Provides
Writing Cookies
Reading Cookies
Removing Cookies

Angularjs Cookies : Get, Set and Delete Example

Set Cookies in AngularJS : When we click simple Set Cookies button click then writeCookies function will be called and a simple new value entered by we will be data saved into your browser cookie using simple put function in key value format.

Get Cookies in AngularJS: When we click Get Cookies button then ReadCookies function will be called and we will get value simple stored in cookies using get function that simple accept the name(key) all of cookie.

READ : Vuejs Dynamic Searching and Sorting Table pagination

RemoveCookies in AngularJS: When we click Clear Cookies button then RemoveCookies function will be called that simple remove the cookie using remove function that accept the simple name(key) of cookie.

$cookies using AngularJS

    <html>
    <head>
        <title>A Simple example of Get, Set and Clear Cookie in AngularJS</title>
    </head>
    <body>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="angular-cookies.js"></script>
        <script type="text/javascript">
            var app = angular.module('liveApp', ['ngCookies']);
            app.controller('livecookCtrl', function ($scope, $window, $cookies) {
                $scope.writeCookies = function () {
                    $cookies.put("clientname", $scope.clientname);
                };
                $scope.ReadCookies = function () {
                    $window.alert($cookies.get('clientname'));
                };
                $scope.RemoveCookies = function () {
                    $cookies.remove('clientname');
                };
            });
        </script>
        <div ng-app="liveApp" ng-controller="livecookCtrl">
            clientname:
            <input type="text" ng-model="clientname" />
            <br />
            <br />
            <input type="button" value="Write Cookies" ng-click="writeCookies()" />
            <input type="button" value="Read Cookies" ng-click="ReadCookies()" />
            <input type="button" value="Remove Cookies" ng-click="RemoveCookies()" />
        </div>
    </body>
    </html>

$cookiesStore using AngularJS

$cookiesStore feature is available in same simple angular-cookies.min.js file upload data and use same simple method get() function, put() function and remove() function.

READ : Simple Angular Form Validation PHP MySQLi

	
      <script type="text/javascript">
            var app = angular.module('liveApp', ['ngCookies']);
            app.controller('livecookCtrl', function ($scope, $window, $cookieStore) {
                $scope.writeCookies = function () {
                    $cookieStore.put("clientname", $scope.clientname);
                };
                $scope.ReadCookies = function () {
                    $window.alert($cookieStore.get('clientname'));
                };
                $scope.RemoveCookies = function () {
                    $cookieStore.remove('clientname');
                };
            });
        </script>

Using service Factory with AngularJS

<html>
<head>
    <title>A Simple example  steps of Get method, Set method and Clear method Cookie using ng all service factory in AngularJS</title>
</head>
<body>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="angular-cookies.js"></script>
     <script type="text/javascript">
        var app = angular.module('liveApp', ['ngCookies']);
        app.controller('livecookCtrl', function ($scope,userPersistenceService, $window) {
            $scope.writeCookies = function () {
                userPersistenceService.writeCookieData($scope.clientname)
            };
            $scope.ReadCookies = function () {
                $window.alert(userPersistenceService.ReadCookieData('clientname'));
            };
            $scope.RemoveCookies = function () {
                userPersistenceService.RemoveCookieData();
            };
        });
        app.factory("userPersistenceService", [
            "$cookies", function($cookies) {
                var clientname = "";
                return {
                    writeCookieData: function(clientname) {
                        $cookies.put("clientname", clientname);
                    },
                    ReadCookieData: function() {
                        clientname = $cookies.get("clientname");
                        return clientname;
                    },
                    RemoveCookieData: function() {
                        clientname = "";
                        $cookies.remove("clientname");
                    }
                }
            }
        ]);
    </script>
    <div ng-app="liveApp" ng-controller="livecookCtrl">
        clientname:
        <input type="text" ng-model="clientname" />
        <br />
        <br />
        <input type="button" value="Set Cookies" ng-click="writeCookies()" />
        <input type="button" value="Get Cookies" ng-click="ReadCookies()" />
        <input type="button" value="Clear Cookies" ng-click="RemoveCookies()" />
    </div>
</body>
</html>

Example