[javascript] Session storage, Local storage, Cookie

 

 

세션 스토리지(Session storage)와 로컬 스토리지(Local storage)는 HTML5에서 추가된 저장소로 간단한 키와 값을 저장할 수 있다. 여기에 저장하면 새로고침을 해도 데이터가 날아가지 않는다. 세션 스토리지는 브라우저를 닫으면 데이터가 사라지지만 로컬 스토리지는 브라우저를 닫아도 남아있다. 저장 제한 용량은 모바일은 2.5mb, 데스크탑은 5mb~10mb 정도이며 기기마다 다를 수 있다.

 

Local Storage

로컬 스토리지는 window.localStorage에 위치한다.

Origin(도메인, 포트, 프로토콜)이 같다면 url 경로가 달라도 공유된다. 한 창에서 데이터를 설정하면 다른 창에서도 변동 사항을 확인할 수 있다. 

메소드

setItem(key, value) - 키-값 쌍을 보관한다

getItem(key) - 키에 해당하는 값을 받아온다

removeItem(key) - 키에 해당하는 값을 삭제한다

clear() - 모든 것을 삭제한다

key(index) - 인덱스에 해당하는 키를 받아온다

length - 저장된 항목의 개수를 얻는다

 

저장시에는 key도 문자열로 저장해야한다.

localStorage.setItem('user', 'lee')

 

Session Storage

세션 스토리지는 window.sessionStorage에 위치한다.

현재 떠 있는 탭 내에서만 유지된다.

브라우저를 닫을 경우 제거되기 때문에 일회성 정보를 저장하기에 좋다.

메소드는 로컬 스토리지와 동일하다.

 

 

Cookie

쿠키 또한 저장소 역할을 하지만 브라우저 요청이 있을 경우 자동으로 함께 서버에 전송된다.

쿠키는 4kb까지 저장이 가능하며, 유효일자와 만료기간을 지정해줘야 한다. 이러한 옵션이 지정되어있지 않으면 브라우저가 닫힐 때 함께 삭제된다.

같은 도메인 상에서는 값이 공유된다. 도메인 하나당 저장할 수 있는 쿠키의 개수는 20여개 정도이며 개수는 기기마다 다를 수 있다.

사용자의 하드에 저장되어 보안에 취약하다는 단점이 있다. 이 때 samesite, httpOnly 옵션을 통해 보호할 수 있다.