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.

AngularJS Set Cookies Get Cookies ClearCookies

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 :  Angular Dynamically Delete Row from Table

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 :  Vuejs Computed Properties - Vue Watch Completed property

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.

Add a Comment

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