브라우저로 데이터를 저장하는 방법

목차
1. cookie
2. session
3. local storage

1. cookie

 

우리가 웹사이트들을 방문하다보면 쿠키 수집에 대한 동의를 얻는 창을 본적이 있을 것이다. 일단 먹는 쿠키를 말하는 건 아닌 것 같은데 어떤걸 말하는지 알아보자.

• 브라우저를 통해 일정기간 저장되는 작은 데이터
• 주로 사용자의 상태정보를 저장하고 방문기록등을 추적하기 위한 목적으로 사용

//저장 방법
document.cookie = '키=값'

//저장된 쿠키 출력
console.log(document.cookie)

ex)
document.cookie = 'text=example'
console.log(document.cookie)

/*
    결과
    text=example
*/

 

쿠키는 브라우저를 통해 저장되고 브라우저가 종료되더라도 유효기간이 지나면 지나지 않으면 삭제되지 않는다. 그렇다면 임의로 지울 수 있는 방법은 없을까?

 

1) 개발자모드에서 삭제

브라우저에는 개발자 모드가 있다. 개발자 모드에서 애플리케이션 탭을 클릭하면 쿠키를 확인할 수 있는데필요에 따라 삭제하는 기능도 제공하고 있다.

 

2) 유효시간 수정

쿠키를 저장할 때 유효시간을 현재시간보다 과거로 지정하게 되면 이미 기간이 지난 쿠키이기 때문에 자동으로 삭제된다.

let date = new Date();
//시간을 하루전으로 설정
date.setTime(date.getTime()-86400000);
//추가된 쿠키는 이미 하루 전에 유효기간이 만료된 쿠키로 사용할 수 없다.
document.cookie = `key=value;expires=${date.toUTCString()}`;

 

• 주의사항

1) 쿠키에 저장시 한글지원이 되지 않는다.

쿠키는 아스키 문자집합만 지원을 하여 이외의 문자인 한글은 쿠키에 저장할 수 없다. 

한글로 쿠키 저장

영문으로 쿠키 저장

그렇다면 한글로 데이터를 포함하여 사용하고 싶은데 방법은 없는걸까? 물론 방법이 있고 간단하다. URL인코딩을 이용하여 지원하지 않는 문자를 아스키 문자로 변환하면 저장이 가능하다.

 

2) 보안

쿠키를 브라우저에 저장되는 정보이기 때문에 여러 보안관련 문제가 발생할 수 있다. 공격자가 쿠키의 내용을 훔쳐 사용자를 도용하거나 서버에 악의적인 공격을 할 경우 치명적인 결과를 낳을 수도 있다. 따라서 개인정보같은 민감한 정보는 저장하는 것을 지양해야 한다.

2. session

• 브라우저에 데이터를 저장하는 방법으로 브라우저가 종료되면 저장된 데이터는 삭제된다.

브라우저가 종료되면 데이터가 삭제되기 때문에 장바구니 같은 정보를 임시적으로 저장할 때 유용하다. 

key-value형식으로 이루어져있다.

//저장
sessionStorage.setItem(키,값);
//조회
sessionStorage.getItem(키);


ex)
sessionStorage.setItem('key','value');
console.log(sessionStorage.getItem('key'))

/*
    결과
    value
*/

3. local storage

• 브라우저를 통해 데이터를 저장하는 방법으로 브라우저를 종료해도 데이터가 사라지지 않음

저장된 데이터를 따로 제거하지 않으면 계속 남아있어 브라우저를 사용할 때 방문기록같이 지워지지 않는 데이터를 저장하는데 유용하다.

key-value형식으로 이루어져 있으며 저장될 데이터는 문자열만 가능하기 때문에 객체같은 데이터는 JSON을 통해 문자열로 변환해주어야 한다.

//저장
localStorage.setItem(키,값);

//조회
localStorage.getItem(키);
//삭제
localStorage.removeItem(키)

//ex)
localStorage.setItem("key","value");
console.log(localStorage.getItem("key"));

/*
    결과
    value
*/

 

* 쿠키와 로컬저장소의 차이

쿠키와 로컬 저장소 모두 브라우저에 데이터를 저장하는 방법으로 브라우저가 종료되더라도 데이터가 유지된다. 그렇다면 서로 어떤 차이가 있을까? 

쿠키	로컬저장소
만료기간이 지나면 자동 소멸	명시적으로 삭제하지 않으면 영속
HTTP헤더에 포함되어 서버로 전송	브라우저 내에aks 저장되고 서버로 전송X
4KB 용량제한	5MB 용량제한