Javascript에서 Cookie, SessionStorage 사용하기

저번 글에서 python Flask 내에서 Cookie와 SessionStorage를 사용하는 방법을 포스팅 하였다.

2022.05.12 - [Python] - flask 에서 Cookie , Session Storage를 활용해 보자

flask 에서 Cookie , Session Storage를 활용해 보자

 

이번 글에서는 Javascript 상에서 Cookie와 Session Storage를 사용하는 방법을 알아보겠다.

// Cookie 만들기
ley key = 'key';
ley value = 'value';

document.cookie = key+'='+value

// 공백값이 있을때는 인코딩 처리를 해주어야 합니다.
let key = 'this is key';
let value = 'this is value';
document.cookie = encodeURIComponent(key) + '=' + encodeURIComponent(value)

// Cookie 옵션 지정하기
// 몇몇 옵션은 반드시 지정해 주어야 한다.
// 옵션 정보는 ;으로 구분한다.

// path
// 특정 경로 혹은 하위 경로에서만 해당 cookie에 접근할수 있도록 제어하는것
// 기본적으로 cookie를 생성한 페이지의 경로이다.
let path = 'path=/;';

// domain
// cookie에 접근 가능한 도메인(domain)을 지정하는것
// 아무런 도메인이나 지정할 수는 없다.
// 기본적으로 cookie를 생성한 도메인이 설정된다.
let domain = 'domain=site.com;'

// expires / max-age
// 유효일자(expire) 혹은 만료일자(max-age) 설정
let date = new Date(Date.now()+ 86400e3) // 하루 뒤에 삭제하기
let expire = 'expires='+date.toUTCString()+';'

// 만료일자 설정
let sec = 3600; // 1 시간 유지하기
let maxAge = 'max-age='+sec+';'
document.cookie = key+'='+value + ';' + path + domain + expires/maxAgel


// Cookie 조회하기
// Cookie를 쉽게 조회하는 기능은 없다... document.cookie를 하면 전체 쿠키를 string 형태로 반환
// 하는데 정규식을 이용하면 쉽게 찾을 수 있다.
var getCookie = function(name) {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value? value[2] : null;
}

핵핵....

뭔 설정하고 조회하는데 왜이렇게 복잡한지....

 

domain, expire, path 등 cookie 설정에 자세한 정보는 아래 사이트를 참고하면 된다.

https://ko.javascript.info/cookie

쿠키와 document.cookie

 

 

 

추가로 Session Storage를 사용하는 방법을 알아보자

// session storage 불러오기
myStorage = window.sessionStorage;

// session storage 에 값 저장하기
myStorage.setItem('key','value');

// session storage 에 저장된 값 조회하기
myStorage.getItem('key');

// session storage 에 저장된 값 삭제하기
myStorage.removeItem('key');

 

저번 글에서도 언급했듯이 cookie보단 session storage가 성능면이나 보안면이나 더 우수하다.

그래도 아직 cookie가 쓰이는 이유는 속도때문이겠지...