AngularJS Set Cookies Get Cookies ClearCookies

Today, We want to share with you AngularJS Set Cookies Get Cookies ClearCookies.In this post we will show you Cookies in AngularJS: Set, Get & Delete Example, hear for How To Store Information in Cookies in AngularJS we will give you demo and example for implement.In this post, we will learn about A Simple example of Get, Set and Clear Cookie in AngularJS with an example.

There are the Following The simple About AngularJS Set Cookies Get Cookies ClearCookies Full Information With Example and source code.

As I will cover this Post with live Working example to develop set cookie Angular JS, so the Set and Clear Cookie in AngularJS for this example is following below.

READ : AngularJS forEach() Function Example

Example 1: $cookies

Using $cookies

    <html>
    <head>
        <title>AngularJS Set Cookies Get Cookies ClearCookies</title>
    </head>
    <body>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.js"></script>
        <script type="text/javascript">
            var liveApp = angular.module('cookiesExample', ['ngCookies']);
            liveApp.controller('LiveCookiesCtrl', function ($scope, $window, $cookies) {
                $scope.SetCookies = function () {
                    $cookies.put("gussegoodname", $scope.gussegoodname);
                };
                $scope.GetCookies = function () {
                    $window.alert($cookies.get('gussegoodname'));
                };
                $scope.ClearCookies = function () {
                    $cookies.remove('gussegoodname');
                };
            });
        </script>
        <div ng-app="cookiesExample" ng-controller="LiveCookiesCtrl">
            Username:
            <input type="text" ng-model="gussegoodname" />
            <br />
            <br />
            <input type="button" value="Set Cookies" ng-click="SetCookies()" />
            <input type="button" value="Get Cookies" ng-click="GetCookies()" />
            <input type="button" value="Clear Cookies" ng-click="ClearCookies()" />
        </div>
    </body>
    </html>

Example 2: $cookiesStore

Using $cookiesStore

      <script type="text/javascript">
            var liveApp = angular.module('cookiesExample', ['ngCookies']);
            liveApp.controller('LiveCookiesCtrl', function ($scope, $window, $cookieStore) {
                $scope.SetCookies = function () {
                    $cookieStore.put("gussegoodname", $scope.gussegoodname);
                };
                $scope.GetCookies = function () {
                    $window.alert($cookieStore.get('gussegoodname'));
                };
                $scope.ClearCookies = function () {
                    $cookieStore.remove('gussegoodname');
                };
            });
        </script>

Example 3: service Factory

Using service Factory

<html>
<head>
    <title>pakainfo.com - A Simple example of Get, Set and Clear Cookie using service factory in AngularJS</title>
</head>
<body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.js"></script>
     <script type="text/javascript">
        var liveApp = angular.module('cookiesExample', ['ngCookies']);
        liveApp.controller('LiveCookiesCtrl', function ($scope,userPersistenceService, $window) {
            $scope.SetCookies = function () {
                userPersistenceService.setCookieData($scope.gussegoodname)
            };
            $scope.GetCookies = function () {
                $window.alert(userPersistenceService.getCookieData('gussegoodname'));
            };
            $scope.ClearCookies = function () {
                userPersistenceService.clearCookieData();
            };
        });
        liveApp.factory("userPersistenceService", [
            "$cookies", function($cookies) {
                var GoodName = "";
                return {
                    setCookieData: function(gussegoodname) {
                        $cookies.put("gussegoodname", gussegoodname);
                    },
                    getCookieData: function() {
                        GoodName = $cookies.get("gussegoodname");
                        return GoodName;
                    },
                    clearCookieData: function() {
                        gussegoodname = "";
                        $cookies.remove("gussegoodname");
                    }
                }
            }
        ]);
    </script>
    <div ng-app="cookiesExample" ng-controller="LiveCookiesCtrl">
        Your Good Name:
        <input type="text" ng-model="gussegoodname" />
        <br />
        <br />
        <input type="button" value="Set Cookies" ng-click="SetCookies()" />
        <input type="button" value="Get Cookies" ng-click="GetCookies()" />
        <input type="button" value="Clear Cookies" ng-click="ClearCookies()" />
    </div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

READ : Angular UI Grid Table Example Steps

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about AngularJS Set Cookies Get Cookies ClearCookies.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.