[Angular]WebStorage 개요
WebStorage란?
WebStorage는 HTML5부터 제공하는 데이터를 서버가 아닌 브라우저에 저장할 수 있게 해주는 기능이다. 브라우저에 데이터를 저장하는 방법에는 Cookie도 있는데 이는 저장할 수 있는 데이터 양이 4KB 밖에 되지 않은 반면, WebStorage는 5MB까지 저장할 수 있다. 데이터는 도메인 별로 각각 저장해주며 임시적으로 데이터를 보관하기 위해서 사용되는 기능이기 때문에 주로 ‘장바구니’, ‘최근본상품’ 등에서 사용되고 있다.
WebStorage의 종류
localStorage
영구적으로 데이터를 보관할 수 있다. 즉, 브라우저를 종료한 후에 다시 열어도 데이터가 남아 있으며 javascript나 브라우저 캐시 혹은 로컬 데이터를 지워야만 데이터를 지울 수 있다. WebStorage 중에 공간이 가장 크다.
sessionStorrage
세션이 유지되는 동안 데이터를 보관할 수 있다. 즉 브라우저를 종료하면 데이터가 지워진다.
WebStorage 사용법
자바스크립트로 조작하는 방법
데이터 구조 : key, value
name, dahye
age, 30
데이터 저장 : setItem()
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
데이터 검색 : getItem()
localStorage.getItem('key');
sessionStorage.getItem('key');
데이터 삭제 : removeItem()
localStorage.removeItem('key');
sessionStorage.removeItem('key');
데이터 일괄 삭제 : clear()
localStorage.clear();
sessionStorage.clear();
key 값 가져오기 : key(index)
localStorage.key(0);
sessionStorage.key(0);
json 데이터 조작하는 방법
json 데이터를 문자열로 변경 : JSON.stringify(jsonData)
const jsonData = { menu : {
id : "file",
value : "File",
popup : {
menuItem : [
{ value : "New", onclick: "CreateNewDoc()"},
{ value : "open", onclick: "OpenDoc()"},
{ value : "close", onclick: "CloseDoc()"}
]
}
});
const jsonDataString = JSON.stringify(jsonData);
localstorage.setItem('menu', jsonDataString);
문자열을 json 데이터로 변경 : JSON.parse(stringData)
const jsonDataString = localstorage.getItem('menu');
const jsonData = JSON.parse(jsonDataString);
console.log(jsonData.menu.popup.menuItem[2].onclick); // CloseDoc()
앵귤러 맞춤 라이브러리
Angular 용 WebStorage 라이브러리로 가장 많이 사용하고 있고 최근까지 업데이트가 되고 있는 ngx-webstorage와 angular-web-storage를 소개한다. WebStorage와 데이터 저장, 검색, 삭제 한다는 점에서는 같지만 데코레이터를 제공해 컴포넌트의 속성과 WebStorage 데이터를 동기화해 준다는 점이 다르다. 그리고 ngx-webstorage의 경우 observe()라는 함수도 제공해 주고 있다.
어노테이션(Annotations)과 데코레이터(Decorators)의 차이
어노테이션과 데코레이터는 모두 Angular에서 동일한 @(at sign) 기호를 공유하지만 기능적으로 차이가 있다. 어노테이션은 메타데이터 라이브러리를 반영하는 데 사용되는 클래스에 설정된 메타데이터이고 데코레이터는 인수에 메타데이터를 추가하는 함수이다.
ngx-webstorage
Angular 7 + 버전부터 사용이 가능하다.
NGX란?
NGX는 체크포인트의 방화벽, VPN 및 관리 솔루션을 위한 가장 최근에 출시된 보안 소프트웨어 플랫폼입니다. NGX 플랫폼은 경계, 내부, 웹 보안을 위한 통합 보안 아키텍처를 제공하는 유일한 보안 플랫폼입니다. 이 통합된 보안 아키텍처는 모든 규모의 기업이 자사 보안에 대한 비용과 관리의 번거로움을 최소화할 수 있게 해주며, 각 보안 시스템이 새로운 보안 위협에 쉽게 대응할 수 있도록 확장성을 보장해줍니다.
체크포인트(CHKP, Check Point)는 2400명 이상의 임직원과 25년의 이상의 업력을 가진 네트워크 보안 회사이다. 방화벽을 처음으로 출시한 이후 여러가지 산업 최초의 제품을 출시하였다. 회사가 보안을 제공하는 영역은 이미 알려진 위험 말고도 알려지지 않은 위험들, 실제 물리적인 환경에서 뿐만 아니라 가상의 환경에서 일어날 수 있는 위험, 클라우드, 모바일, 사물환경(IoT)에 이르는 다양한 환경에서 일어날 수 있는 위험에 대한 보안 솔루션을 제공한다.
아키텍쳐(Architecture)란?
직역하면 건축학이라는 의미로 컴퓨터 공학에서의 개념은 컴퓨터 시스템의 근간이 되는 운영 구조를 의미하며 건축의 설계도와 같다. 하드웨어에서는 CPU, 레지스터, 기억 장치, 입출력 장치 등과 같은 여러 가지 컴퓨터 구성 요소들에 대한 전반적인 기계적 구조와 이를 설계하는 방법이라 할 수 있고, 소프트웨어에서는 소프트웨어의 구성요소들 사이에서 유기적인 관계를 표현하고 소프트웨어의 설계와 업그레이드를 통제하는 지침과 원칙이라 할 수 있다.
설치하기
npm install --save ngx-webstorage
준비하기
메인 모듈에서 라이브러리 선언
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxWebstorageModule} from 'ngx-webstorage';
@NgModule({
declarations: [...],
imports: [
BrowserModule,
NgxWebstorageModule.forRoot(),
],
bootstrap: [...]
})
export class AppModule {
}
forRoot()/forChild()란?
Module을 import할 때 사용하는 함수.
rootModule에서는 forRoot()를 이용해서 모듈을 import하고, rootModule 이외 모듈에서는 forChild() 함수를 이용해서 모듈을 import 하는데, 이는 service가 반복해서 생성되는 것을 막아 준다. 각각의 서비스에서 모듈이 중복되면 더이상 싱클톤 패턴이 아니게 된다.싱글톤 패턴이란?
어플리케이션이 시작될 때 어떤 클래스가 최초 한번만 메모리를 할당하고(static) 그 메모리에 인스턴스를 만들어 사용하는 디자인 패턴.싱글톤 유지하는 방법
– 서비스를 모듈에 직접 등록하지말고, providedIn 문법을 쓰자.
– 모듈마다 서비스를 분리하자.
– 모듈에 forRoot()와 forChild() 메소드를 정의하자.
서비스 선언해서 사용
import {Component} from '@angular/core';
import {LocalStorageService, SessionStorageService} from 'ngx-webstorage';
@Component({
selector: 'foo',
template: `foobar`
})
export class FooComponent {
constructor(private localSt:LocalStorageService) {}
ngOnInit() {
this.localSt.observe('key')
.subscribe((value) => console.log('new value', value));
}
}– 데이터 저장
store( key:string, value:any ):void– 데이터 검색
retrieve( key:string ):any– 데이터 삭제
clear( key?:string ):void– 데이터 구독
observe( key?:string ):EventEmitter
데코레이터 사용
import {Component} from '@angular/core';
import {LocalStorage, SessionStorage} from 'ngx-webstorage';
@Component({
selector: 'foo',
template: `{{boundValue}}`,
})
export class FooComponent {
@LocalStorage()
public boundValue;
}
angular-web-storage
설치하기
npm install angular-web-storage --save
준비하기
메인 모듈에서 라이브러리 선언
import { AngularWebStorageModule } from 'angular-web-storage';
@NgModule({
imports: [ AngularWebStorageModule ],
bootstrap: [AppComponent]
})
export class AppModule {
}
서비스 선언해서 사용
import { Component } from '@angular/core';
import { LocalStorageService, SessionStorageService, LocalStorage, SessionStorage } from 'angular-web-storage';
@Component({
selector: 'demo',
templateUrl: './demo.component.html'
})
export class DemoComponent {
constructor(private local: LocalStorageService, private session: SessionStorageService) { }
KEY = 'value';
value: any = null;
set(expired: number = 0) {
this.local.set(this.KEY, { a: 1, now: +new Date }, expired, 's');
}
remove() {
this.local.remove(this.KEY);
}
get() {
this.value = this.local.get(this.KEY);
}
clear() {
this.local.clear();
}
}
데코레이터 사용
import { Component } from '@angular/core';
import { LocalStorageService, SessionStorageService, LocalStorage, SessionStorage } from 'angular-web-storage';
@Component({
selector: 'demo',
templateUrl: './demo.component.html'
})
export class DemoComponent {
@LocalStorage() localValue: Object = { text: `Hello ${+new Date}`};
// 저장 KEY 설정, 10시간 후 만료
@LocalStorage('newKey', 10, 'h') localValue2: Object = { text: `Hello ${+new Date}`};
@SessionStorage() sessionValue: string = `Hello ${+new Date}`;
}
ngx-webstorage
