July 8, 2018

Angularjs cookie Set Cookie Get Cookie Delete Cookie Example

By admin AngularJs, Technology 0 Comments

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 : Vue js First Application Example with vue mvc

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 : AngularJS Array-json Get Last Element using javascript

	
      <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

READ : Laravel Sending Email setup configuration step by step

Post Views: 812

Angularjs cookie Set Cookie Get Cookie Delete Cookie Example

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

Angularjs Cookies : Get, Set and Delete Example

$cookies using AngularJS

$cookiesStore using AngularJS

Using service Factory with AngularJS

Related Posts

Add a Comment