FrontendSPAAngular.js

Angular.js v1.0 Storage

Angular.js v1 HTML5 Storage 사용하기

Angular.js에서 HTML5의 localStorage, sessionStorage의 기능을 사용할때 Factory에 등록하고 사용하면 유용하다.
아래 예제 코드에서 JSON.parse()를 사용한 이유는 storage 키값에 저장된 값은 문자열인 string으로 저장 되기에 원시데이터로 다시 변환하기 위함이다.

세션 스토리지 Factory 등록

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
-factories.js

angular.module('starter.factories', [])

// sessionStorage 사용을 위한 셋팅
.factory('$sessionStorage', ['$window', function($window) {
	return {
		get: function(key) {
			return JSON.parse( $window.sessionStorage.getItem(key) );
		},
		set: function(key, value) {
            $window.sessionStorage.setItem(key, value);
		},
		getObject: function(key) {
            return JSON.parse( $window.sessionStorage.getItem(key) || '{}');
		},
        setObject: function(key, value) {
			$window.sessionStorage.setItem(key, JSON.stringify(value));
        },
		remove: function(key) {
            $window.sessionStorage.removeItem(key);
		}
	};
}])

컨트롤러에서 세션 스토리지 사용하기

1
2
3
4
.controller('MainCtrl', function($scope, $rootScope, $sessionStorage) {
    $sessionStorage.set('test', 'one'); // 세션스토리지 test 키값에 "one" 값 저장 
    $sessionStorage.get('test') // 세션스토리지 test 키값 가져오기
});

로컬 스토리지 Factory 등록

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
-factories.js

angular.module('starter.factories', [])

// localStorage 사용을 위한 셋팅
.factory('$localStorage', ['$window', function($window) {
	return {
		get: function(key, defaultValue) {
			return $window.localStorage[key] || defaultValue;
		},
		set: function(key, value) {
            $window.localStorage[key] = value;
		},
		getObject: function(key) {
            return JSON.parse( $window.localStorage[key] || '{}');
		},
        setObject: function(key, value) {
			$window.localStorage[key] = JSON.stringify(value);
        },
		remove: function(key) {
            $window.localStorage.removeItem(key);
		}
	};
}])

컨트롤러에서 로컬 스토리지 사용하기

1
2
3
4
.controller('MainCtrl', function($scope, $rootScope, $localStorage) {
    $localStorage.set('test', 100); // 로컬 스토리지 test 키값에 "one" 값 저장 
    $localStorage.get('test') // 로컬 스토리지 test 키값 가져오기
});

참조

공유하기