AngularJS : Cookies

Mahir Koding – Pastinya kita semua sudah pernah mendengar yang namanya Cookies bukan? Cookies adalah sebuah value yang dibuat oleh sebuah web dan disimpan di browser. Nah, karena dapat disimpan di browser, biasanya cookies digunakan untuk menyimpan sesuatu yang berhubungan dengan detail login user. Mengapa disimpan di cookies? Karena cookies tidak akan hilang ketika browser di close, kecuali di clear dari settings. AngularJS juga mempunyai module yang dapat membantu kita dalam management cookies di browser.

Installation

<script type="text/javascript" src="js/angular-cookies.min.js"></script>

Jangan lupa, ketika ingin menggunakan sebuah module, maka tambahkan juga module tersebut ke dalam pendeklarasian var app kita. Jika ingin menggunakan 2 module sekaligus, tinggal ditambahkan saja value barunya di dalam scope arraynya seperti di bawah ini.

var app = angular.module("myApps", ['ngRoute','ngCookies']);
<body ng-app="myApps" ng-controller="userController">
	<input type="text" ng-model="key" placeholder="Key">
	<input type="text" ng-model="value" placeholder="Value">
	<button ng-click="store()">Store</button>
	<p>
		<ul>
			<li ng-repeat="(key,value) in allCookies">
				{{ key + " : " + value }}
				 <a href="#" ng-click="alertData(key)">Alert</a>
				 <a href="#" ng-click="deleteData(key)">Delete</a>
			</li>
		</ul>	
	</p>
</body>
<script type="text/javascript" >
	var app = angular.module("myApps", ['ngRoute','ngCookies']);

	app.controller("userController", function($scope, $cookies){
		$scope.allCookies = $cookies.getAll();

		$scope.store = function(){
			$cookies.put($scope.key, $scope.value);
			//clear form
			$scope.key = "";
			$scope.value = "";
			$scope.allCookies = $cookies.getAll();
		}
		$scope.alertData = function(key){
			alert($cookies.get(key));
		}
		$scope.deleteData = function(key){
			$cookies.remove(key);
			$scope.allCookies = $cookies.getAll();
		}
	})
</script>

Ada beberapa method yang bisa digunakan untuk mengolah cookies yang ada di browser.

  • getAll() – digunakan untuk mengambil semua object cookies yang ada (key dan value).
  • get(key) – digunakan untuk mengambil value dari cookies berdasarkan keynya.
  • put(key, value) – digunakan untuk inisialisasi atau mengupdate sebuah cookies. Kalau key yang dituju belum ada, maka otomatis akan membuatkan cookies yang baru. Namun juga terdapat kesamaan nama, maka put() akan bertugas mengupdate isi dari cookies berdasarkan key yang dituju.
  • remove(key) – digunakan untuk menghapus cookies berdasarkan keynya.

Jika ada pertanyaan yang kurang jelas silahkan berkomentar di bawah. Atau, jika ingin request tutorial juga dapat ke halaman ini. Dukung terus Mahir Koding agar dapat selalu mengupdate artikel dengan share dan like artikel ini. Terima Kasih.